: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

css
/* 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

css
: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:

html
<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:

js
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
: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