:host-context()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die :host-context()
CSS Pseudoklasse ermöglicht es Ihnen, Elemente innerhalb eines Shadow DOM unterschiedlich zu gestalten, basierend auf dem Selektor des Shadow-Hosts (dem Element, das die Shadow-Root enthält) und seinen DOM-Vorfahren.
Normalerweise sind Elemente innerhalb eines Shadow DOMs vom DOM außerhalb davon isoliert. Die :host-context()
-Pseudoklasse erlaubt es Ihnen, "außerhalb" dieses Shadow DOMs nachzusehen und zu überprüfen, ob eines der Vorfahren des Elements einem bestimmten CSS-Selektor entspricht. Beispielsweise kann damit eine andere Textfarbe auf Elemente innerhalb einer Shadow-Root angewendet werden, wenn die Klasse .dark-theme
auf <body>
angewendet wurde.
Denken Sie an folgendes Szenario: Stellen Sie sich vor, Sie haben ein benutzerdefiniertes <greenhouse>
-Element, in dem ein <chameleon>
lebt. Hier ist das <greenhouse>
der Shadow-DOM-Host und das <chameleon>
-Element befindet sich innerhalb des Shadow DOMs. Die :host-context()
-Pseudoklasse ermöglicht es dem <chameleon>
, sein Aussehen basierend auf der Umgebung des <greenhouse>
zu ändern. Wenn das <greenhouse>
an einem sonnigen Standort ist (eine Klasse "sunny-theme" hat), wird das <chameleon>
gelb. Befindet sich das <greenhouse>
an einem schattigen Ort (eine Klasse "shady-theme" wurde angewendet), wird das <chameleon>
blau.
Dieser Selektor durchdringt alle Shadow-Grenzen. Er sucht nach der sunny- oder shady-Themenklasse, die direkt auf das <greenhouse>
oder auf einen der Vorfahren des Hosts und seiner DOM-Vorfahren bis zur Wurzel des Dokuments angewendet wurde.
Um den Selektor nur direkt auf den <greenhouse>
-Host oder auf dessen DOM zu begrenzen, verwenden Sie stattdessen die Pseudoklasse :host
oder :host()
.
Hinweis: Dies hat keine Wirkung, wenn es außerhalb eines Shadow DOMs verwendet wird.
Die Spezifität von :host-context()
entspricht der einer Pseudoklasse, zuzüglich der Spezifität des Selektors, der als Argument der Funktion übergeben wird.
Probieren Sie es aus
/* Selects a shadow root host, only if it is
a descendant of the selector argument given */
:host-context(h1) {
font-weight: bold;
}
/* Changes paragraph text color from black to white when
a .dark-theme class is applied to the document body */
p {
color: #000;
}
:host-context(body.dark-theme) p {
color: #fff;
}
Syntax
:host-context(<compound-selector>) {
/* ... */
}
Beispiele
Selektives Styling von Shadow-Hosts
Die folgenden Codeausschnitte stammen aus unserem host-selectors-Beispiel (sehen Sie sich dies auch live an).
In diesem Beispiel haben wir ein einfaches benutzerdefiniertes Element — <context-span>
— das Sie um Text herum anwenden 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(.footer) { color : red; }" +
":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
Die Regeln :host-context(h1) { font-style: italic; }
und :host-context(h1):after { content: " - no links in headers!" }
gestalten die Instanz des <context-span>
-Elements (den Shadow-Host in diesem Fall) innerhalb des <h1>
. Wir haben es verwendet, um klarzustellen, dass das benutzerdefinierte Element in unserem Design nicht innerhalb des <h1>
erscheinen sollte.
Spezifikationen
Specification |
---|
CSS Scoping Module Level 1 # host-selector |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:host-context() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
Siehe auch
- Web Components
- CSS
:host
-Pseudoklasse - CSS
:host()
-Pseudoklasse - CSS
:state()
-Pseudoklasse - CSS
::slotted
-Pseudoelement - HTML
<template>
-Element - CSS-Scoping-Modul