:host

La pseudo-classe :host permet de cibler l'hôte d'un shadow DOM contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (custom element) depuis l'intérieur du shadow DOM.

Note : Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un shadow DOM.

/* Cible la racine d'un hôte de shadow DOM */
:host {
  font-weight: bold;
}

Syntaxe

La syntaxe n'a pas été trouvée !

Exemples

Les fragments de code qui suivent 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>

Pour le constructeur de cet élément, on crée des éléments style et span : l'élément span recevra le contenu de l'élément personnalisé et 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 { background: rgba(0,0,0,0.1); padding: 2px 5px; } permet de cibler l'ensemble des instances de <context-span> (qui est l'hôte ici) dans le document.

Spécifications

Spécification État Commentaires
CSS Scoping Module Level 1
La définition de ':host' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:hostChrome Support complet 54Edge Aucun support Non
Notes
Aucun support Non
Notes
Notes Under consideration
Firefox Support complet 63
Support complet 63
Aucun support 61 — 63
Désactivée
Désactivée From version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 41Safari Support complet 10WebView Android Support complet 54Chrome Android Support complet 54Firefox Android Support complet 63
Support complet 63
Aucun support 61 — 63
Désactivée
Désactivée From version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 41Safari iOS Support complet 10Samsung Internet Android Support complet 6.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi