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-context()/index.html | 94 ----------------------- 1 file changed, 94 deletions(-) delete mode 100644 files/fr/web/css/_colon_host-context()/index.html (limited to 'files/fr/web/css/_colon_host-context()/index.html') diff --git a/files/fr/web/css/_colon_host-context()/index.html b/files/fr/web/css/_colon_host-context()/index.html deleted file mode 100644 index 6457aa73c3..0000000000 --- a/files/fr/web/css/_colon_host-context()/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: ':host-context()' -slug: 'Web/CSS/:host-context()' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference - - Web -translation_of: 'Web/CSS/:host-context()' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La pseudo-classe :host-context() est une fonction qui sélectionne l'hôte (shadow host) du shadow DOM qui contient le CSS utilisé à l'intérieur, uniquement si le sélecteur fourni en argument correspond à l'ancêtre de l'hôte selon l'arborescence du DOM.

- -

Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — h1 par exemple — afin de sélectionner uniquement les instances d'un élément personnalisé (custom element) présentes à l'intérieur d'un élément <h1>.

- -
-

Note : Cette pseudo-classe n'a aucun effet en dehors d'un shadow DOM.

-
- -
/* Cible un hôte uniquement si c'est un descendant
-   du sélecteur passé en argument */
-:host-context(h1) {
-  font-weight: bold;
-}
-
-:host-context(main article) {
-  font-weight: bold;
-}
-
-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

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

- -

Dans cet exemple, on dispose d'un élément personnalisé — <context-span> — au sein duquel on peut avoir du texte :

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

Dans le constructeur de l'élément, on crée des éléments style et span et on remplit le span avec le contenu de l'élément personnalisé puis on applique certains règles CSS pour l'élément style :

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

Les règles :host-context(h1) { font-style: italic; } et :host-context(h1):after { content: " - no links in headers!" } permettent de mettre en forme l'instance de l'élément <context-span> (l'hôte de cette instance) à l'intérieur de l'élément <h1>. Nous avons utilisé cet hôte afin d'indiquer clairement qu'un tel élément personnalisé ne doit pas apparaître dans un titre <h1>.

- -

Spécifications

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

Compatibilité des navigateurs

- -

{{Compat("css.selectors.host-context")}}

- -

Voir aussi

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