:host()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Die :host() CSS Pseudoklasse Funktion wählt den Shadow-Host des Shadow DOM aus, der das CSS enthält, in dem sie verwendet wird (so können Sie ein benutzerdefiniertes Element aus seinem Shadow DOM heraus auswählen) – jedoch nur, wenn der als Funktionsparameter angegebene Selektor mit dem Shadow-Host übereinstimmt. :host() hat keine Wirkung, wenn sie außerhalb eines Shadow DOM verwendet wird.
Der offensichtlichste Anwendungsfall besteht darin, einen Klassennamen nur auf bestimmten Instanzen von benutzerdefinierten Elementen anzuwenden und dann den entsprechenden Klassen-Selektor als Funktionsargument zu verwenden. Sie können dies nicht mit einem Nachkommenselektor-Ausdruck verwenden, um nur Instanzen des benutzerdefinierten Elements auszuwählen, die sich innerhalb eines bestimmten Vorfahren befinden. Dafür ist :host-context() zuständig.
Hinweis:
Während andere funktionale Pseudoklassen wie :is() und :not() eine Liste von Selektoren als Parameter akzeptieren, nimmt :host() einen einzelnen zusammengesetzten Selektor als Parameter. Darüber hinaus berücksichtigen :is() und :not() nur die Spezifität ihres Arguments, während die Spezifität von :host() sowohl die Spezifität der Pseudoklasse als auch die Spezifität ihres Arguments umfasst.
Probieren Sie es aus
/* Following CSS is being applied inside the shadow DOM. */
:host(h1) {
color: red;
}
:host(#shadow-dom-host) {
border: 2px dashed blue;
}
<!-- elements outside shadow dom -->
<div id="container">
<h1 id="shadow-dom-host"></h1>
</div>
const shadowDom = init();
// add a <span> element in the shadow DOM
const span = document.createElement("span");
span.textContent = "Inside shadow DOM";
shadowDom.appendChild(span);
// attach shadow DOM to the #shadow-dom-host element
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;
}
/* Selects a shadow root host, only if it is
matched by the selector argument */
:host(.special-custom-element) {
font-weight: bold;
}
Syntax
:host(<compound-selector>) {
/* ... */
}
Beispiele
Selektives Stylen von Shadow-Hosts
Die folgenden Snippets stammen aus unserem host-selectors Beispiel (siehe es auch live).
In diesem Beispiel haben wir ein benutzerdefiniertes Element — <context-span> — das Sie um Text herum platzieren können:
<h1>
Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
Innerhalb des Konstruktors des Elements erstellen wir style- und span-Elemente, füllen das span mit dem Inhalt des benutzerdefinierten Elements und füllen das style-Element mit einigen CSS-Regeln:
const style = document.createElement("style");
const 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: rgb(0 0 0 / 10%); padding: 2px 5px; }";
Die Regel :host(.footer) { color : red; } stylt alle Instanzen des <context-span> Elements (in diesem Fall der Shadow-Host) im Dokument, die die Klasse footer gesetzt haben – wir haben sie verwendet, um Instanzen des Elements innerhalb des <footer> eine besondere Farbe zu geben.
Spezifikationen
| Specification |
|---|
| CSS Scoping Module Level 1 # host-selector |
Browser-Kompatibilität
Loading…