From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- .../web/api/shadowroot/delegatesfocus/index.html | 44 -------- .../fr/web/api/shadowroot/delegatesfocus/index.md | 44 ++++++++ files/fr/web/api/shadowroot/host/index.html | 55 ---------- files/fr/web/api/shadowroot/host/index.md | 55 ++++++++++ files/fr/web/api/shadowroot/index.html | 111 --------------------- files/fr/web/api/shadowroot/index.md | 111 +++++++++++++++++++++ files/fr/web/api/shadowroot/innerhtml/index.html | 40 -------- files/fr/web/api/shadowroot/innerhtml/index.md | 40 ++++++++ files/fr/web/api/shadowroot/mode/index.html | 61 ----------- files/fr/web/api/shadowroot/mode/index.md | 61 +++++++++++ 10 files changed, 311 insertions(+), 311 deletions(-) delete mode 100644 files/fr/web/api/shadowroot/delegatesfocus/index.html create mode 100644 files/fr/web/api/shadowroot/delegatesfocus/index.md delete mode 100644 files/fr/web/api/shadowroot/host/index.html create mode 100644 files/fr/web/api/shadowroot/host/index.md delete mode 100644 files/fr/web/api/shadowroot/index.html create mode 100644 files/fr/web/api/shadowroot/index.md delete mode 100644 files/fr/web/api/shadowroot/innerhtml/index.html create mode 100644 files/fr/web/api/shadowroot/innerhtml/index.md delete mode 100644 files/fr/web/api/shadowroot/mode/index.html create mode 100644 files/fr/web/api/shadowroot/mode/index.md (limited to 'files/fr/web/api/shadowroot') diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.html b/files/fr/web/api/shadowroot/delegatesfocus/index.html deleted file mode 100644 index a42192a6a2..0000000000 --- a/files/fr/web/api/shadowroot/delegatesfocus/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: ShadowRoot.delegatesFocus -slug: Web/API/ShadowRoot/delegatesFocus -tags: - - API - - Non-standard - - Propriété - - Reference - - ShadowRoot -translation_of: Web/API/ShadowRoot/delegatesFocus ---- -
{{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()")}}).

- -
-

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

-
- -

Syntaxe

- -
var df = shadowRoot.delegatesFocus
- -

Valeur

- -

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

- -

Exemples

- -
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;
- -

Spécifications

- -

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

- -

Compatibilité des navigateurs

- -

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

diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.md b/files/fr/web/api/shadowroot/delegatesfocus/index.md new file mode 100644 index 0000000000..a42192a6a2 --- /dev/null +++ b/files/fr/web/api/shadowroot/delegatesfocus/index.md @@ -0,0 +1,44 @@ +--- +title: ShadowRoot.delegatesFocus +slug: Web/API/ShadowRoot/delegatesFocus +tags: + - API + - Non-standard + - Propriété + - Reference + - ShadowRoot +translation_of: Web/API/ShadowRoot/delegatesFocus +--- +
{{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()")}}).

+ +
+

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

+
+ +

Syntaxe

+ +
var df = shadowRoot.delegatesFocus
+ +

Valeur

+ +

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

+ +

Exemples

+ +
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;
+ +

Spécifications

+ +

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

+ +

Compatibilité des navigateurs

+ +

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

diff --git a/files/fr/web/api/shadowroot/host/index.html b/files/fr/web/api/shadowroot/host/index.html deleted file mode 100644 index 8b23a74117..0000000000 --- a/files/fr/web/api/shadowroot/host/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: ShadowRoot.host -slug: Web/API/ShadowRoot/host -tags: - - API - - Propriété - - Reference - - ShadowRoot - - shadow dom -translation_of: Web/API/ShadowRoot/host ---- -
{{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.

- -

Syntaxe

- -
var element = shadowRoot.host
- -

Valeur

- -

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

- -

Exemples

- -
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")}}

diff --git a/files/fr/web/api/shadowroot/host/index.md b/files/fr/web/api/shadowroot/host/index.md new file mode 100644 index 0000000000..8b23a74117 --- /dev/null +++ b/files/fr/web/api/shadowroot/host/index.md @@ -0,0 +1,55 @@ +--- +title: ShadowRoot.host +slug: Web/API/ShadowRoot/host +tags: + - API + - Propriété + - Reference + - ShadowRoot + - shadow dom +translation_of: Web/API/ShadowRoot/host +--- +
{{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.

+ +

Syntaxe

+ +
var element = shadowRoot.host
+ +

Valeur

+ +

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

+ +

Exemples

+ +
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")}}

diff --git a/files/fr/web/api/shadowroot/index.html b/files/fr/web/api/shadowroot/index.html deleted file mode 100644 index 81af6c08ea..0000000000 --- a/files/fr/web/api/shadowroot/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: ShadowRoot -slug: Web/API/ShadowRoot -tags: - - API - - Interface - - Reference - - ShadowRoot - - Web Components -translation_of: Web/API/ShadowRoot ---- -
{{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.

- -

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

- -
-
{{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

- -

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.
-
- -

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")}}.

- -
-
{{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

- -

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.

- -

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).

- -
connectedCallback() {
-  console.log("Le carré personnalisé a été ajouté à la page.");
-  updateStyle(this);
-}
-
-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 :

- -
function updateStyle(elem) {
-  var shadow = elem.shadowRoot;
-  var childNodes = shadow.childNodes;
-  for(var i = 0; i < childNodes.length; i++) {
-    if(childNodes[i].nodeName === 'STYLE') {
-      childNodes[i].textContent =
-        'div {' +
-          'width: ' + elem.getAttribute('l') + 'px;' +
-          'height: ' + elem.getAttribute('l') + 'px;' +
-          'background-color: ' + elem.getAttribute('c') + ';' +
-        '}';
-    }
-  }
-}
- -

Spécifications

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

Compatibilité des navigateurs

- -

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

diff --git a/files/fr/web/api/shadowroot/index.md b/files/fr/web/api/shadowroot/index.md new file mode 100644 index 0000000000..81af6c08ea --- /dev/null +++ b/files/fr/web/api/shadowroot/index.md @@ -0,0 +1,111 @@ +--- +title: ShadowRoot +slug: Web/API/ShadowRoot +tags: + - API + - Interface + - Reference + - ShadowRoot + - Web Components +translation_of: Web/API/ShadowRoot +--- +
{{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.

+ +

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

+ +
+
{{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

+ +

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.
+
+ +

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")}}.

+ +
+
{{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

+ +

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.

+ +

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).

+ +
connectedCallback() {
+  console.log("Le carré personnalisé a été ajouté à la page.");
+  updateStyle(this);
+}
+
+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 :

+ +
function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i < childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent =
+        'div {' +
+          'width: ' + elem.getAttribute('l') + 'px;' +
+          'height: ' + elem.getAttribute('l') + 'px;' +
+          'background-color: ' + elem.getAttribute('c') + ';' +
+        '}';
+    }
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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.html b/files/fr/web/api/shadowroot/innerhtml/index.html deleted file mode 100644 index 5580e5ad2c..0000000000 --- a/files/fr/web/api/shadowroot/innerhtml/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: ShadowRoot.innerHTML -slug: Web/API/ShadowRoot/innerHTML -tags: - - API - - Propriété - - Reference - - ShadowRoot - - innerHTML - - shadow dom -translation_of: Web/API/ShadowRoot/innerHTML ---- -
{{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.

- -

Syntaxe

- -
var domString = shadowRoot.innerHTML
-shadowRoot.innerHTML = domString
-
- -

Valeur

- -

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

- -

Exemples

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

Spécifications

- -

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

- -

Compatibilité des navigateurs

- -

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

diff --git a/files/fr/web/api/shadowroot/innerhtml/index.md b/files/fr/web/api/shadowroot/innerhtml/index.md new file mode 100644 index 0000000000..5580e5ad2c --- /dev/null +++ b/files/fr/web/api/shadowroot/innerhtml/index.md @@ -0,0 +1,40 @@ +--- +title: ShadowRoot.innerHTML +slug: Web/API/ShadowRoot/innerHTML +tags: + - API + - Propriété + - Reference + - ShadowRoot + - innerHTML + - shadow dom +translation_of: Web/API/ShadowRoot/innerHTML +--- +
{{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.

+ +

Syntaxe

+ +
var domString = shadowRoot.innerHTML
+shadowRoot.innerHTML = domString
+
+ +

Valeur

+ +

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

+ +

Exemples

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

Spécifications

+ +

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

+ +

Compatibilité des navigateurs

+ +

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

diff --git a/files/fr/web/api/shadowroot/mode/index.html b/files/fr/web/api/shadowroot/mode/index.html deleted file mode 100644 index 2e68fcb24e..0000000000 --- a/files/fr/web/api/shadowroot/mode/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: ShadowRoot.mode -slug: Web/API/ShadowRoot/mode -tags: - - API - - Propriété - - Reference - - ShadowRoot - - mode - - shadow dom -translation_of: Web/API/ShadowRoot/mode ---- -
{{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.

- -

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

- -
var mode = shadowRoot.mode
- -

Valeur

- -

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

- -

Exemples

- -
let customElem = document.querySelector('mon-element-shadow-dom');
-let shadow = customElem.shadowRoot;
-
-// Une autre façon de vérifier si la racine est ouverte :
-// on obtiendra null si elle est fermée
-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")}}

diff --git a/files/fr/web/api/shadowroot/mode/index.md b/files/fr/web/api/shadowroot/mode/index.md new file mode 100644 index 0000000000..2e68fcb24e --- /dev/null +++ b/files/fr/web/api/shadowroot/mode/index.md @@ -0,0 +1,61 @@ +--- +title: ShadowRoot.mode +slug: Web/API/ShadowRoot/mode +tags: + - API + - Propriété + - Reference + - ShadowRoot + - mode + - shadow dom +translation_of: Web/API/ShadowRoot/mode +--- +
{{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.

+ +

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

+ +
var mode = shadowRoot.mode
+ +

Valeur

+ +

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

+ +

Exemples

+ +
let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+// Une autre façon de vérifier si la racine est ouverte :
+// on obtiendra null si elle est fermée
+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")}}

-- cgit v1.2.3-54-g00ecf