`:host-context()` CSS-Pseudoklasse

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Die :host-context() CSS Pseudoklasse ermöglicht es Ihnen, Elemente innerhalb eines Shadow DOM unterschiedlich zu stylen, basierend auf dem Selektor des Shadow Hosts (dem Element, das die Shadow-Root hat) und dessen DOM-Vorfahren.

Normalerweise sind Elemente innerhalb eines Shadow DOMs vom äußeren DOM isoliert. Die :host-context() ermöglicht es Ihnen, "außerhalb" dieses Shadow DOMs zu blicken und zu überprüfen, ob eines der Vorfahr-Elemente des Elements mit einem bestimmten CSS-Selektor übereinstimmt. Zum Beispiel das Anwenden einer anderen Textfarbe auf Elemente innerhalb einer Shadow-Root, wenn eine .dark-theme Klasse auf <body> angewendet wird.

Stellen Sie sich das so vor: Sie haben ein benutzerdefiniertes <greenhouse> Element, das ein <chameleon> darin hat. Hier ist das <greenhouse> der Shadow-DOM-Host und das <chameleon> Element befindet sich innerhalb des Shadow DOMs. Die :host-context() lässt das <chameleon> sein Aussehen basierend auf der Umgebung des <greenhouse> ändern. Wenn das <greenhouse> an einem sonnigen Ort steht (eine "sunny-theme"-Klasse hat), wird das <chameleon> gelb. Wenn das <greenhouse> an einem schattigen Ort steht (eine "shady-theme"-Klasse angewendet), wird das <chameleon> blau.

Dieser Selektor durchdringt alle Shadow-Grenzen. Er sucht nach dem direkt auf das <greenhouse> angewendeten sonnigen oder schattigen Thema oder auf einen der Vorfahren des Hosts und dessen Vorfahren-DOMs, bis zur Dokumentwurzel.

Um den Selektor auf nur den <greenhouse> Host direkt zu beschränken oder die Auswahl auf das DOM des Hosts zu beschränken, verwenden Sie stattdessen die :host oder :host() Pseudoklasse.

Hinweis: Dies hat keine Wirkung, wenn es außerhalb eines Shadow DOMs verwendet wird.

Die Spezifität von :host-context() ist die einer Pseudoklasse, plus der Spezifität des Selektors, der als Argument der Funktion übergeben wird.

Probieren Sie es aus

/* Following CSS is being applied inside the shadow DOM. */

:host-context(.container) {
  border: 5px dashed green;
}

:host-context(h1) {
  color: red;
}

<!-- elements outside shadow dom -->
<div class="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;
}

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: black;
}

:host-context(body.dark-theme) p {
  color: white;
}

Syntax

css

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

Beispiele

Selektives Styling von Shadow Hosts

Die folgenden Ausschnitte sind aus unserem host-selectors Beispiel entnommen (siehe es auch live).

In diesem Beispiel haben wir ein einfaches benutzerdefiniertes Element — <context-span> — das Sie um Text herum platzieren können:

html

<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 füllen 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!" } stylen die Instanz des <context-span> Elements (denn Shadow Host in diesem Fall) innerhalb des <h1>. Wir haben es verwendet, um klar zu machen, dass das benutzerdefinierte Element nicht innerhalb des <h1> in unserem Design erscheinen sollte.