:host()

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()-Funktion der CSS-Pseudoklasse wählt den Shadow-Host des Shadow DOM aus, in dem das CSS verwendet wird (sodass Sie ein benutzerdefiniertes Element aus seinem Shadow DOM heraus auswählen können) – aber nur, wenn der als Parameter der Funktion angegebene Selektor zum Shadow-Host passt. :host() hat keine Wirkung, wenn es außerhalb eines Shadow DOM verwendet wird.

Die offensichtlichste Verwendung hierfür besteht darin, nur bestimmten Instanzen eines benutzerdefinierten Elements einen Klassennamen zuzuweisen und dann den entsprechenden Klassen-Selektor als Funktionsargument aufzunehmen. Sie können dies nicht mit einem Nachfahren-Selektor 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 Pseudoklassen wie :is() und :not() eine Liste von Selektoren als Parameter akzeptieren, nimmt :host() einen einzelnen zusammengesetzten Selektor als Parameter an. Darüber hinaus berücksichtigt :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

css
/* Selects a shadow root host, only if it is
   matched by the selector argument */
:host(.special-custom-element) {
  font-weight: bold;
}

Syntax

css
:host(<compound-selector>) {
  /* ... */
}

Beispiele

Selektive Gestaltung von Shadow Hosts

Die folgenden Code-Snippets 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 verwenden 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-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; } gestaltet alle Instanzen des <context-span>-Elements (in diesem Fall der Shadow-Host) im Dokument, die die Klasse footer haben — wir haben sie verwendet, um Instanzen des Elements innerhalb des <footer> eine spezielle Farbe zuzuweisen.

Spezifikationen

Specification
CSS Scoping Module Level 1
# host-selector

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch