: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 stylen, basierend auf dem Selektor des Shadow Hosts (das Element, das die Shadow-Root enthält) und dessen DOM-Vorfahren.

Normalerweise sind Elemente innerhalb eines Shadow DOM vom externen DOM isoliert. Die :host-context() erlaubt es Ihnen, "außerhalb" dieses Shadow DOM zu schauen und zu prüfen, ob eines der Vorfahren des Elements einem bestimmten CSS-Selektor entspricht. Zum Beispiel, um eine andere Textfarbe auf Elemente innerhalb einer Shadow-Root anzuwenden, wenn eine .dark-theme-Klasse auf angewendet wird.

Denken Sie daran wie folgt: Stellen Sie sich vor, Sie haben ein benutzerdefiniertes -Element, in dem ein lebt. Hier ist das der Shadow DOM Host und das -Element befindet sich innerhalb des Shadow DOM. Die :host-context() lässt das sein Aussehen basierend auf der Umgebung des ändern. Wenn das an einem sonnigen Ort steht (hat eine "sunny-theme"-Klasse), wird das gelb. Wenn das an einem schattigen Platz steht (eine "shady-theme"-Klasse stattdessen angewendet), wird das blau.

Dieser Selektor durchdringt alle Schatten-Grenzen. Er sucht nach dem sonnigen oder schattigen Thema, das direkt auf das oder auf einen der Vorfahren des Hosts und der Vorfahren DOMs angewendet wurde, bis es die Wurzel des Dokuments erreicht.

Um den Selektor nur auf den direkten Host oder auf das DOM des Hosts zu beschränken, verwenden Sie 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() entspricht der 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;
}




  




const shadowDom = init();

// add a  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: #000;
}

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

Syntax

css
:host-context() {
  /* ... */
}

Beispiele

Selektives Stylen von Shadow Hosts

Die folgenden Snippets stammen aus unserem host-selectors Beispiel (siehe es auch live).

In diesem Beispiel haben wir ein einfaches benutzerdefiniertes Element — — das Sie um Text herumwickeln können:

html

  Host selectors example

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 :host-context(h1) { font-style: italic; } und :host-context(h1):after { content: " - no links in headers!" } Regeln stylen die Instanz des -Elements (den Shadow Host in diesem Fall) innerhalb des

. Wir haben es verwendet, um klarzumachen, dass das benutzerdefinierte Element nicht innerhalb des

erscheinen sollte in unserem Design.

Spezifikationen

Specification
CSS Scoping Module Level 1
# host-selector

Browser-Kompatibilität

Siehe auch