From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/_colon_host()/index.html | 87 ------------------------------- files/fr/web/css/_colon_host()/index.md | 87 +++++++++++++++++++++++++++++++ 2 files changed, 87 insertions(+), 87 deletions(-) delete mode 100644 files/fr/web/css/_colon_host()/index.html create mode 100644 files/fr/web/css/_colon_host()/index.md (limited to 'files/fr/web/css/_colon_host()') diff --git a/files/fr/web/css/_colon_host()/index.html b/files/fr/web/css/_colon_host()/index.html deleted file mode 100644 index f2bbe1b429..0000000000 --- a/files/fr/web/css/_colon_host()/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: ':host()' -slug: 'Web/CSS/:host()' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:host()' ---- -
{{CSSRef}}
- -

La fonction de pseudo-classe :host() permet de sélectionner l'hôte du shadow DOM contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.

- -

Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction :host(). Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser  {{cssxref(":host-context()")}}.

- -
-

Note : Cette fonction n'a aucun effet si elle est utilisée en dehors d'un shadow DOM.

-
- -
/* On cible l'hôte du shadow DOM uniquement s'il
-   correspond au sélecteur passé en argument */
-:host(.special-custom-element) {
-  font-weight: bold;
-}
-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Les fragments de code suivants sont extraits du dépôt d'exemple host-selectors (voir le résultat live).

- -

Dans cet exemple, on dispose d'un élément personnalisé,  <context-span>, qui peut contenir du texte :

- -
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
- -

Dans le constructeur de l'élément, on crée un élément style et un élément span. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément style recevra quelques règles CSS :

- -
let style = document.createElement('style');
-let span = document.createElement('span');
-span.textContent = this.textContent;
-
-const shadowRoot = this.attachShadow({mode: 'open'});
-shadowRoot.appendChild(style);
-shadowRoot.appendChild(span);
-
-style.textContent = 'span:hover { text-decoration: underline; }' +
-                    ':host-context(h1) { font-style: italic; }' +
-                    ':host-context(h1):after { content: " - no links in headers!" }' +
-                    ':host-context(article, aside) { color: gray; }' +
-                    ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
- -

La règle :host(.footer) { color : red; } s'applique à toutes les instances de l'élément <context-span> (il s'agit ici de l'hôte) du document qui possèdent la classe footer. Ici, pour ces éléments donnés, on utilise une couleur spécifique.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Scope', '#host-selector', ':host()')}}{{Spec2('CSS Scope')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.hostfunction")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_host()/index.md b/files/fr/web/css/_colon_host()/index.md new file mode 100644 index 0000000000..f2bbe1b429 --- /dev/null +++ b/files/fr/web/css/_colon_host()/index.md @@ -0,0 +1,87 @@ +--- +title: ':host()' +slug: 'Web/CSS/:host()' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:host()' +--- +
{{CSSRef}}
+ +

La fonction de pseudo-classe :host() permet de sélectionner l'hôte du shadow DOM contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.

+ +

Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction :host(). Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser  {{cssxref(":host-context()")}}.

+ +
+

Note : Cette fonction n'a aucun effet si elle est utilisée en dehors d'un shadow DOM.

+
+ +
/* On cible l'hôte du shadow DOM uniquement s'il
+   correspond au sélecteur passé en argument */
+:host(.special-custom-element) {
+  font-weight: bold;
+}
+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Les fragments de code suivants sont extraits du dépôt d'exemple host-selectors (voir le résultat live).

+ +

Dans cet exemple, on dispose d'un élément personnalisé,  <context-span>, qui peut contenir du texte :

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

Dans le constructeur de l'élément, on crée un élément style et un élément span. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément style recevra quelques règles CSS :

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

La règle :host(.footer) { color : red; } s'applique à toutes les instances de l'élément <context-span> (il s'agit ici de l'hôte) du document qui possèdent la classe footer. Ici, pour ces éléments donnés, on utilise une couleur spécifique.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Scope', '#host-selector', ':host()')}}{{Spec2('CSS Scope')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.hostfunction")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf