From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/_colon_host-context()/index.html | 96 +++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 files/fr/web/css/_colon_host-context()/index.html (limited to 'files/fr/web/css/_colon_host-context()') diff --git a/files/fr/web/css/_colon_host-context()/index.html b/files/fr/web/css/_colon_host-context()/index.html new file mode 100644 index 0000000000..36bcacd731 --- /dev/null +++ b/files/fr/web/css/_colon_host-context()/index.html @@ -0,0 +1,96 @@ +--- +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