8枚原子弹威胁轰炸我国?侦察机标定坐标千钧一发
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die :host() CSS-Pseudoklassen-Funktion w?hlt den Shadow-Host des Shadow DOM aus, das das CSS enth?lt, in dem sie verwendet wird (damit Sie ein benutzerdefiniertes Element von innerhalb seines Shadow DOM ausw?hlen k?nnen) – jedoch nur, wenn der als Parameter der Funktion angegebene Selektor mit dem Shadow-Host übereinstimmt. :host() hat keine Wirkung, wenn es au?erhalb eines Shadow DOMs verwendet wird.
Der offensichtlichste Anwendungsfall hierfür ist, einem benutzerdefinierten Element eine Klassenname nur auf bestimmte Instanzen zu setzen und dann den entsprechenden Klassenselektor als Funktionsargument einzuschlie?en. Sie k?nnen dies nicht mit einem Nachfahren-Selektorausdruck 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 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 Styling von Shadow-Hosts
Die folgenden Ausschnitte 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 einen 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 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 footer-Klasse 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 |