CSS/Selektoren/part

Der ::part-Selektor entspricht denjenigen Elementen eines Shadow DOM, deren part-Attribut die in den Klammern von ::part() angegebenen Part-Namen enthält. Sie können auf diese Weise in das Shadow DOM eines Elements hineingreifen und darin Elemente mit CSS formatieren.

Browserunterstützung
caniuse.com

Syntax	::part
Parameter	{{{Parameter}}}}}
Browsersupport	Details: caniuse.com

Beispiel

#shadowhost::part(p1) {
  color: red;
}

<div id="shadowhost">
</div>

let host = document.getElementById("shadowhost");
host.attachShadow({ mode: "open" });
host.innerHTML = "<p part='p1 q7 f6'>Hier ist Part 1<p>";

Das Script erzeugt im shadowhost-div ein Shadow DOM und darin ein p Element. Das p Element bekommt drei part-Namen: p1, q7 und f6. Im Stylesheet wird im Shadow DOM des #shadowhost Elements ein Element gesucht, das den Partnamen p1 enthält, und rot gefärbt. Partnamen sind ähnlich wie Klassen zu sehen. Das Shadow DOM ist aber vom normalen DOM abgeschirmt und seine innere Struktur soll nicht sichtbar sein. Deshalb kann man nicht mit normalen Selektoren hineingreifen. Das ::part()-Pseudoelement bietet einen begrenzten Zugriff.

Siehe auch

• CSS/Selektoren/host
• Web Components
  • Shadow DOM

Weblinks

• CSSWG: Selecting a Shadow Element: the ::part() pseudo-element CSS Shadow Parts
• MDN: ::part