::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
/* Selects any element placed inside a slot */
::slotted(*) {
font-weight: bold;
}
/* Selects any <span> placed inside a slot */
::slotted(span) {
font-weight: bold;
}
Syntax
::slotted(<compound-selector>) {
/* ... */
}
Beispiele
Hervorheben von eingeschobenen Elementen
In diesem Beispiel verwenden wir ein Template mit drei Slots:
<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:
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:
<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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::slotted |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
:host
:host()
:host-context()
:has-slotted
- CSS Scoping-Modul
- HTML-Attribut
slot
- HTML-
<slot>
-Element - HTML-
<template>
-Element - Web-Komponenten