From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- .../fr/web/api/shadowroot/delegatesfocus/index.md | 32 +++--- files/fr/web/api/shadowroot/host/index.md | 53 ++++------ files/fr/web/api/shadowroot/index.md | 117 +++++++++------------ files/fr/web/api/shadowroot/innerhtml/index.md | 31 +++--- files/fr/web/api/shadowroot/mode/index.md | 55 ++++------ 5 files changed, 126 insertions(+), 162 deletions(-) (limited to 'files/fr/web/api/shadowroot') diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.md b/files/fr/web/api/shadowroot/delegatesfocus/index.md index a42192a6a2..57433496de 100644 --- a/files/fr/web/api/shadowroot/delegatesfocus/index.md +++ b/files/fr/web/api/shadowroot/delegatesfocus/index.md @@ -9,36 +9,36 @@ tags: - ShadowRoot translation_of: Web/API/ShadowRoot/delegatesFocus --- -
{{APIRef("Shadow DOM")}}
+{{APIRef("Shadow DOM")}} -

delegatesFocus est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option delegatesFocus a été intialisée lors de l'attachement de la racine shadow (cf. {{domxref("Element.attachShadow()")}}).

+**`delegatesFocus`** est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option `delegatesFocus` a été intialisée lors de l'attachement de la racine _shadow_ (cf. {{domxref("Element.attachShadow()")}}). -
-

Attention : Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.

-
+> **Attention :** Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome. -

Syntaxe

+## Syntaxe -
var df = shadowRoot.delegatesFocus
+ var df = shadowRoot.delegatesFocus -

Valeur

+### Valeur -

Un booléen : true si la racine shadow délègue la gestion du focus et false sinon.

+Un booléen : `true` si la racine _shadow_ délègue la gestion du focus et `false` sinon. -

Exemples

+## Exemples -
let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
   ...
 
 // Est-ce que la racine gère la délégation du focus ?
-let hostElem = shadow.delegatesFocus;
+let hostElem = shadow.delegatesFocus; +``` -

Spécifications

+## Spécifications -

Cette fonctionnalité n'est actuellement décrite dans aucune spécification.

+Cette fonctionnalité n'est actuellement décrite dans aucune spécification. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.ShadowRoot.delegatesFocus")}}

+{{Compat("api.ShadowRoot.delegatesFocus")}} diff --git a/files/fr/web/api/shadowroot/host/index.md b/files/fr/web/api/shadowroot/host/index.md index 8b23a74117..5b3bf045e6 100644 --- a/files/fr/web/api/shadowroot/host/index.md +++ b/files/fr/web/api/shadowroot/host/index.md @@ -9,47 +9,36 @@ tags: - shadow dom translation_of: Web/API/ShadowRoot/host --- -
{{APIRef("Shadow DOM")}}
+{{APIRef("Shadow DOM")}} -

La propriété host est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui représente une référence à l'élément du DOM auquel la racine ShadowRoot est attachée.

+La propriété **`host`** est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui représente une référence à l'élément du DOM auquel la racine `ShadowRoot` est attachée. -

Syntaxe

+## Syntaxe -
var element = shadowRoot.host
+ var element = shadowRoot.host -

Valeur

+### Valeur -

Un élément du DOM sous la forme d'un objet {{domxref('Element')}}.

+Un élément du DOM sous la forme d'un objet {{domxref('Element')}}. -

Exemples

+## Exemples -
let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
   ...
 
 // renvoie l'élément hôte
-let hostElem = shadow.host;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#dom-shadowroot-host','ShadowRoot.host')}}{{Spec2('DOM WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.ShadowRoot.host")}}

+let hostElem = shadow.host; +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('DOM WHATWG','#dom-shadowroot-host','ShadowRoot.host')}} | {{Spec2('DOM WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.ShadowRoot.host")}} diff --git a/files/fr/web/api/shadowroot/index.md b/files/fr/web/api/shadowroot/index.md index 81af6c08ea..9c8a7816d9 100644 --- a/files/fr/web/api/shadowroot/index.md +++ b/files/fr/web/api/shadowroot/index.md @@ -9,58 +9,53 @@ tags: - Web Components translation_of: Web/API/ShadowRoot --- -
{{APIRef('Shadow DOM')}}
+{{APIRef('Shadow DOM')}} -

L'interface ShadowRoot, relative à l'API Shadow DOM, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal.

+L'interface **`ShadowRoot`**, relative à l'API _Shadow DOM_, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal. -

Il est possible de récupérer une référence à la racine shadow d'un élément via la propriété {{domxref("Element.shadowRoot")}} si la racine a été créée avec la méthode {{domxref("Element.attachShadow()")}} et l'option mode qui valait open.

+Il est possible de récupérer une référence à la racine _shadow_ d'un élément via la propriété {{domxref("Element.shadowRoot")}} si la racine a été créée avec la méthode {{domxref("Element.attachShadow()")}} et l'option `mode` qui valait `open`. -

Propriétés

+## Propriétés -
-
{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}
-
Cette propriété renvoie un booléen qui indique si l'option delegatesFocus a été activée lors de la liaison avec la racine shadow (cf. {{domxref("Element.attachShadow()")}}).
-
{{domxref("ShadowRoot.host")}} {{readonlyinline}}
-
Cette propriété renvoie une référence à l'élément DOM auquel la racine ShadowRoot est attachée.
-
{{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}}
-
Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racine ShadowRoot.
-
{{domxref("ShadowRoot.mode")}} {{readonlyinline}}
-
Cette propriété renvoie le mode utilisé pour la racine ShadowRoot : open ou closed. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript.
-
+- {{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}} + - : Cette propriété renvoie un booléen qui indique si l'option `delegatesFocus` a été activée lors de la liaison avec la racine _shadow_ (cf. {{domxref("Element.attachShadow()")}}). +- {{domxref("ShadowRoot.host")}} {{readonlyinline}} + - : Cette propriété renvoie une référence à l'élément DOM auquel la racine `ShadowRoot` est attachée. +- {{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}} + - : Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racine `ShadowRoot`. +- {{domxref("ShadowRoot.mode")}} {{readonlyinline}} + - : Cette propriété renvoie le mode utilisé pour la racine `ShadowRoot` : `open` ou `closed`. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript. -

Propriétés incluses via DocumentOrShadowRoot

+### Propriétés incluses via `DocumentOrShadowRoot` -

L'interface ShadowRoot inclut les propriétés suivantes grâce au mixin {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.

+_L'interface `ShadowRoot` inclut les propriétés suivantes grâce au_ mixin _{{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}._ -
-
{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}
-
L'élément ({{domxref('Element')}}) au sein du sous-arbre shadow qui a le focus.
-
{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}
-
Une liste {{domxref('StyleSheetList')}} d'objets {{domxref('CSSStyleSheet')}} qui référencent les feuilles de styles liées explicitement ou embarquées dans le document.
-
+- {{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}} + - : L'élément ({{domxref('Element')}}) au sein du sous-arbre _shadow_ qui a le focus. +- {{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}} + - : Une liste {{domxref('StyleSheetList')}} d'objets {{domxref('CSSStyleSheet')}} qui référencent les feuilles de styles liées explicitement ou embarquées dans le document. -

Méthodes

+## Méthodes -

L'interface ShadowRoot inclut les méthodes suivantes qui proviennent du mixin {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.

+_L'interface `ShadowRoot` inclut les méthodes suivantes qui proviennent du_ mixin _{{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}._ -
-
{{domxref("DocumentOrShadowRoot.getSelection()")}}
-
Cette méthode renvoie un objet {{domxref('Selection')}} représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur.
-
{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}
-
Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments.
-
{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}
-
Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments.
-
{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}
-
Cette méthode renvoie un objet {{domxref('CaretPosition')}} contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud.
-
+- {{domxref("DocumentOrShadowRoot.getSelection()")}} + - : Cette méthode renvoie un objet {{domxref('Selection')}} représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur. +- {{domxref("DocumentOrShadowRoot.elementFromPoint()")}} + - : Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments. +- {{domxref("DocumentOrShadowRoot.elementsFromPoint()")}} + - : Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments. +- {{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}} + - : Cette méthode renvoie un objet {{domxref('CaretPosition')}} contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud. -

Exemples

+## Exemples -

Les fragments de code suivants sont extraits de l'exemple life-cycle-callbacks (voir le résultat en live) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément.

+Les fragments de code suivants sont extraits de l'exemple [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks) ([voir le résultat en _live_](https://mdn.github.io/web-components-examples/life-cycle-callbacks)) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément. -

Dans la définition de la classe pour l'élément <custom-square>, on ajoute certains callbacks permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externe updateStyle() qui applique la taille et la couleur à l'élément. On lui passe l'argument this (c'est-à-dire l'élément lui-même).

+Dans la définition de la classe pour l'élément ``, on ajoute certains _callbacks_ permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externe `updateStyle()` qui applique la taille et la couleur à l'élément. On lui passe l'argument `this` (c'est-à-dire l'élément lui-même). -
connectedCallback() {
+```js
+connectedCallback() {
   console.log("Le carré personnalisé a été ajouté à la page.");
   updateStyle(this);
 }
@@ -68,14 +63,16 @@ translation_of: Web/API/ShadowRoot
 attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {
   console.log("Les attributs du carré ont changé.");
   updateStyle(this);
-}
+} +``` -

Quant à la fonction updateStyle(), voyons ici son fonctionnement. On récupère une référence au shadow DOM avec {{domxref("Element.shadowRoot")}}. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément {{htmlelement("style")}} présent dans le shadow DOM et on met à jour le CSS pour cet élément :

+Quant à la fonction `updateStyle()`, voyons ici son fonctionnement. On récupère une référence au _shadow DOM_ avec {{domxref("Element.shadowRoot")}}. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément {{htmlelement("style")}} présent dans le _shadow DOM_ et on met à jour le CSS pour cet élément : -
function updateStyle(elem) {
+```js
+function updateStyle(elem) {
   var shadow = elem.shadowRoot;
   var childNodes = shadow.childNodes;
-  for(var i = 0; i < childNodes.length; i++) {
+  for(var i = 0; i < childNodes.length; i++) {
     if(childNodes[i].nodeName === 'STYLE') {
       childNodes[i].textContent =
         'div {' +
@@ -85,27 +82,15 @@ attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {
         '}';
     }
   }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}}{{Spec2('DOM WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.ShadowRoot")}}

+} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{SpecName('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}} | {{Spec2('DOM WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.ShadowRoot")}} diff --git a/files/fr/web/api/shadowroot/innerhtml/index.md b/files/fr/web/api/shadowroot/innerhtml/index.md index 5580e5ad2c..71b322ed76 100644 --- a/files/fr/web/api/shadowroot/innerhtml/index.md +++ b/files/fr/web/api/shadowroot/innerhtml/index.md @@ -10,31 +10,32 @@ tags: - shadow dom translation_of: Web/API/ShadowRoot/innerHTML --- -
{{APIRef("Shadow DOM")}}
+{{APIRef("Shadow DOM")}} -

La propriété innerHTML, rattachée à l'interface {{domxref("ShadowRoot")}}, permet de définir ou de récupérer une référence à l'arbre DOM contenu dans la racine ShadowRoot.

+La propriété **`innerHTML`**, rattachée à l'interface {{domxref("ShadowRoot")}}, permet de définir ou de récupérer une référence à l'arbre DOM contenu dans la racine `ShadowRoot`. -

Syntaxe

+## Syntaxe -
var domString = shadowRoot.innerHTML
-shadowRoot.innerHTML = domString
-
+ var domString = shadowRoot.innerHTML + shadowRoot.innerHTML = domString -

Valeur

+### Valeur -

Une chaîne de caractères {{domxref("DOMString")}}.

+Une chaîne de caractères {{domxref("DOMString")}}. -

Exemples

+## Exemples -
let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
-shadow.innerHTML = '<strong>Cet élément devrait être plus important !</strong>';
+shadow.innerHTML = 'Cet élément devrait être plus important !'; +``` -

Spécifications

+## Spécifications -

Cette propriété ne fait pas encore partie d'une spécification. Voir cette issue pour le projet de spécification.

+Cette propriété ne fait pas encore partie d'une spécification. Voir [cette _issue_](https://github.com/w3c/DOM-Parsing/issues/21) pour le projet de spécification. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.ShadowRoot.innerHTML")}}

+{{Compat("api.ShadowRoot.innerHTML")}} diff --git a/files/fr/web/api/shadowroot/mode/index.md b/files/fr/web/api/shadowroot/mode/index.md index 2e68fcb24e..a328bb7f87 100644 --- a/files/fr/web/api/shadowroot/mode/index.md +++ b/files/fr/web/api/shadowroot/mode/index.md @@ -10,23 +10,24 @@ tags: - shadow dom translation_of: Web/API/ShadowRoot/mode --- -
{{APIRef("Shadow DOM")}}
+{{APIRef("Shadow DOM")}} -

La propriété mode, rattachée à l'interface {{domxref("ShadowRoot")}}, indique son mode. Celui-ci peut valoir open ou closed et indique si les fonctionnalités internes de la racine sont accessibles en JavaScript.

+La propriété **`mode`**, rattachée à l'interface {{domxref("ShadowRoot")}}, indique son mode. Celui-ci peut valoir `open` ou `closed` et indique si les fonctionnalités internes de la racine sont accessibles en JavaScript. -

Lorsque le mode d'une racine shadow vaut closed, les détails d'implémentation internes sont inaccessibles et inchangeables avec JavaScript (de la même façon que les détails du fonctionnement de l'élément {{HTMLElement("video")}} sont inaccessibles et inchangeables en JavaScript).

+Lorsque le mode d'une racine _shadow_ vaut `closed`, les détails d'implémentation internes sont inaccessibles et inchangeables avec JavaScript (de la même façon que les détails du fonctionnement de l'élément {{HTMLElement("video")}} sont inaccessibles et inchangeables en JavaScript). -

Syntaxe

+## Syntaxe -
var mode = shadowRoot.mode
+ var mode = shadowRoot.mode -

Valeur

+### Valeur -

Une valeur définie via l'énumération ShadowRootMode : soit open, soit closed.

+Une valeur définie via l'énumération [`ShadowRootMode`](https://dom.spec.whatwg.org/#enumdef-shadowrootmode) : soit `open`, soit `closed`. -

Exemples

+## Exemples -
let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
 // Une autre façon de vérifier si la racine est ouverte :
@@ -35,27 +36,15 @@ if(shadow) {
   // Si elle est ouverte, on ferme la racine pour
   // cacher ce qu'il y a à l'intérieur.
   shadow.mode = 'closed';
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}}{{Spec2('DOM WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.ShadowRoot.mode")}}

+} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}} | {{Spec2('DOM WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.ShadowRoot.mode")}} -- cgit v1.2.3-54-g00ecf