| CARVIEW |
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:host-context()
Obsolète: Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
La fonction de pseudo-classe CSS :host-context() sélectionne l'hôte sombre (shadow host) du DOM sombre (shadow DOM) contenant le CSS dans lequel il est utilisé (afin de pouvoir sélectionner un élément personnalisé depuis l'intérieur de son DOM sombre), uniquement si le sélecteur fourni comme paramètre de la fonction correspond à un ancêtre de l'hôte sombre à l'emplacement qu'il occupe dans la hiérarchie du DOM.
Normalement, les éléments d'un DOM ombre sont isolés du DOM extérieur. La fonction :host-context() vous permet de « jeter un œil à l'extérieur » de ce DOM ombre et de vérifier si l'un des éléments ancêtres correspond à un sélecteur CSS donné. Par exemple, appliquer une couleur de texte différente aux éléments d'une racine ombre lorsqu'une classe .dark-theme est appliquée à <body>.
Imaginez que vous ayez un élément personnalisé <greenhouse>, dans lequel vit un <chameleon>. Ici, le <greenhouse> est l'hôte du Shadow DOM et l'élément <chameleon> se trouve dans le Shadow DOM. La fonction :host-context() permet au <chameleon> de changer d'apparence en fonction de l'environnement du <greenhouse>. Si le <greenhouse> se trouve dans un endroit ensoleillé (il a une classe « sunny-theme »), le <chameleon> devient jaune. Si le <greenhouse> se trouve dans un endroit ombragé (une classe « shady-theme » est appliquée à la place), le <chameleon> devient bleu.
Ce sélecteur traverse toutes les limites d'ombre. Il recherchera le thème ensoleillé ou ombragé appliqué directement à la <greenhouse> ou à l'un des ancêtres de l'hôte et aux DOM ancêtres jusqu'à atteindre la racine du document.
Pour limiter le sélecteur uniquement à l'hôte <greenhouse> directement ou limiter la sélection au DOM de l'hôte, utilisez plutôt la pseudo-classe :host ou :host().
Note : Cette pseudo-classe n'a aucun effet si elle est utilisée en dehors d'un shadow DOM.
La spécificité de :host-context() est celle d'une pseudo-classe, à laquelle s'ajoute la spécificité du sélecteur passé en argument à la fonction.
Exemple interactif
/* Le CSS suivant est appliqué à l'intérieur du shadow DOM. */
:host-context(.container) {
border: 5px dashed green;
}
:host-context(h1) {
color: red;
}
<!-- éléments en dehors du shadow DOM -->
<div class="container">
<h1 id="shadow-dom-host"></h1>
</div>
const shadowDom = init();
// ajouter un élément <span> dans le shadow DOM
const span = document.createElement("span");
span.textContent = "À l'intérieur du shadow DOM";
shadowDom.appendChild(span);
// attacher le shadow DOM à l'élément #shadow-dom-host
function init() {
const host = document.getElementById("shadow-dom-host");
const shadowDom = host.attachShadow({ mode: "open" });
const cssTab = document.querySelector("#css-output");
const shadowStyle = document.createElement("style");
shadowStyle.textContent = cssTab.textContent;
shadowDom.appendChild(shadowStyle);
cssTab.addEventListener("change", () => {
shadowStyle.textContent = cssTab.textContent;
});
return shadowDom;
}
/* Sélectionne un hôte de shadow root, uniquement s'il est
correspondant au sélecteur passé en argument */
:host-context(h1) {
font-weight: bold;
}
/* Change la couleur du texte des paragraphes de noir à blanc lorsque
la classe .dark-theme est appliquée à l'élément body */
p {
color: black;
}
:host-context(body.dark-theme) p {
color: white;
}
Syntaxe
:host-context(<compound-selector>) {
/* ... */
}
Exemples
Mettre en forme les hôtes sombres de façon ciblée
Les fragments de code qui suivent sont tirés de notre exemple sur les sélecteurs d'hôte (voir la démonstration).
Dans cet exemple, on a un élément personnalisé, <context-span>, dans lequel on peut écrire du texte :
<h1>
<a href="#"><context-span>Exemple</context-span></a> pour les sélecteurs
d'hôte
</h1>
Dans le constructeur de l'élément, on crée des éléments <style> et <span>, et on remplit l'élément <span> avec le contenu de l'élément personnalisé, puis on remplit l'élément <style> avec 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: " - pas de lien dans les titres !" }' +
":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: " - pas de lien dans les titres !" } mettent en forme les instances de l'élément <context-span> (ici l'hôte sombre) contenus dans des éléments <h1>. Dans notre exemple, nous avons utilisé ces règles pour afficher clairement que cet élément personnalisé ne devrait pas apparaître dans un élément <h1>.
Spécifications
| Specification |
|---|
| CSS Scoping Module Level 1 # host-selector |
Compatibilité des navigateurs
Loading…
Voir aussi
- Les composants web
- La pseudo-classe CSS
:host - La pseudo-classe CSS
:host() - La pseudo-classe CSS
:state() - Le pseudo-élément CSS
::slotted - L'élément HTML
<template> - Le module CSS scoping