::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 Pseudo-Element repräsentiert jedes Element, das in einen Slot innerhalb einer HTML-Vorlage platziert wurde (siehe Verwendung von Templates und Slots für weitere Informationen).
Dies funktioniert nur, wenn es innerhalb von CSS verwendet wird, das im Shadow DOM platziert ist. Beachten Sie, dass dieser Selektor keinen Textknoten auswählt, der in einen Slot eingefügt wurde; es 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
Hervorhebung von slotted Elements
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 <person-details>
Custom Element. In diesem Fall fügen wir Styles mit JavaScript hinzu, obwohl wir sie auch in einem <style>
Block innerhalb des <template>
mit demselben Effekt hätten hinzufügen können:
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 Inhalt füllen, werden Sie sehen, dass wir alle slotted Elements (::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 slotted <span>
s (::slotted(span)
) gestylt, um die <span>
s von den <p>
s zu differenzieren.
Unser Markup beinhaltet drei Custom Elements, einschließlich eines Custom Elements mit einem ungültigen Slotnamen in einer Quellreihenfolge, die sich von der im <template>
unterscheidet:
<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
BCD tables only load in the browser
Siehe auch
:host
:host()
:host-context()
- Modul für CSS Scoping
- HTML
slot
Attribut - HTML
<slot>
Element - HTML
<template>
Element - Webkomponenten