: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()-Funktion der CSS Pseudoklasse wählt den Schatten-Host des Shadow-DOM aus, der das CSS enthält, in dem sie verwendet wird (damit Sie ein benutzerdefiniertes Element innerhalb seines Shadow-DOM auswählen können) — aber nur, wenn der als Parameter der Funktion angegebene Selektor mit dem Schatten-Host übereinstimmt. :host() hat keine Wirkung, wenn sie außerhalb eines Shadow-DOMs verwendet wird.
Der offensichtlichste Nutzen hiervon ist, einen Klassennamen nur auf bestimmten Instanzen eines benutzerdefinierten Elements zu setzen und dann den relevanten Klassen-Selektor als Funktionsargument einzuschließen. Sie können dies nicht mit einem Nachfahren-Selektor-Ausdruck verwenden, um nur Instanzen des benutzerdefinierten Elements auszuwählen, die sich innerhalb eines bestimmten Vorfahren befinden. Das ist die Aufgabe von :host-context().
Hinweis:
Während andere funktionale Pseudo-Klassen wie :is() und :not() eine Liste von Selektoren als Parameter akzeptieren, nimmt :host() einen einzigen 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 ist.
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 Schatten-Hosts
Die folgenden Codebeispiele stammen aus unserem host-selectors Beispiel (sehen Sie es sich auch live an).
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>
Im Konstruktor des Elements erstellen wir style- und span-Elemente, füllen das span mit dem Inhalt des benutzerdefinierten Elements und 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 (den Schatten-Host in diesem Fall) im Dokument, die die Klasse footer gesetzt haben — wir haben es verwendet, um Instanzen des Elements innerhalb des <footer> eine spezielle Farbe zu geben.
Spezifikationen
| Specification |
|---|
| CSS Scoping Module Level 1 # host-selector |