::slotted()

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.

Das ::slotted()-CSS-Pseudoelement repräsentiert jedes Element, das in einen Slot innerhalb eines HTML-Templates platziert wurde (siehe Verwendung von Templates und Slots für weitere Informationen).

Dies funktioniert nur, wenn es innerhalb von CSS im Shadow DOM verwendet wird. Beachten Sie, dass dieser Selektor keinen Textknoten auswählt, der in einen Slot eingefügt wurde; er zielt nur auf tatsächliche Elemente ab.

Probieren Sie es aus

css
/* Selects any element placed inside a slot */
::slotted(*) {
  font-weight: bold;
}

/* Selects any <span> placed inside a slot */
::slotted(span) {
  font-weight: bold;
}

Syntax

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

Beispiele

Hervorheben von eingeschobenen Elementen

In diesem Beispiel verwenden wir ein Template mit drei Slots:

html
<template id="person-template">
  <div>
    <h2>Personal ID Card</h2>
    <slot name="person-name">NAME MISSING</slot>
    <ul>
      <li><slot name="person-age">AGE MISSING</slot></li>
      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
    </ul>
  </div>
</template>

Wir definieren das benutzerdefinierte <person-details>-Element. In diesem Fall fügen wir die Styles mit JavaScript hinzu, obwohl wir sie auch in einem <style>-Block im <template> mit dem gleichen Effekt hinzufügen könnten:

js
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(*) { color: gray; font-family: sans-serif; } " +
        "::slotted(span) {text-decoration: underline;} ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);

Wenn Sie das style-Element mit Inhalten füllen, werden Sie feststellen, dass wir alle eingefügten Elemente (::slotted(*)) auswählen und ihnen eine andere Schriftart und Farbe geben. Dies unterscheidet sie von den Slots, die nicht gefüllt wurden. Wir haben alle eingefügten <span>s (::slotted(span)) gestylt, um die <span>-Elemente von den <p>-Elementen zu unterscheiden.

Unser Markup enthält drei benutzerdefinierte Elemente, darunter ein benutzerdefiniertes Element mit einem ungültigen Slot-Namen in einer Quellreihenfolge, die vom <template> abweicht:

html
<person-details>
  <p slot="person-name">Wonder Woman</p>
  <span slot="person-age">Immortal</span>
  <span slot="person-occupation">Superhero</span>
</person-details>

<person-details>
  <p slot="person-name">Malala Yousafzai</p>
  <span slot="person-age">17</span>
  <span slot="person-occupation">Activist</span>
</person-details>

<person-details>
  <span slot="person-age">44</span>
  <span slot="not-a-slot-name">Time traveler</span>
  <p slot="person-name">Dr. Who</p>
</person-details>

Ergebnis

Spezifikationen

Specification
CSS Scoping Module Level 1
# slotted-pseudo

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

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch