::part()

Beschreibung

Das globale part-Attribut macht ein Shadow-DOM-Baumelement im übergeordneten DOM sichtbar. Die im part-Attribut deklarierten Part-Namen werden als Parameter des ::part()-Pseudoelements verwendet. Auf diese Weise können Sie CSS-Stile auf Elemente im Shadow-Baum anwenden, die sich außerhalb davon befinden.

Part-Namen ähneln CSS-Klassen: Mehrere Elemente können denselben Part-Namen haben, und ein einzelnes Element kann mehrere Part-Namen haben. Alle im ::part()-Pseudoelement verwendeten Part-Namen müssen im part-Wert vorhanden sein, der im Shadow-DOM-Element deklariert ist, aber die Reihenfolge der Part-Namen spielt keine Rolle, d.h. die Selektoren ::part(tab active) und ::part(active tab) sind gleich.

Das ::part()-Pseudoelement ist nur im übergeordneten DOM sichtbar. Das bedeutet, dass bei einem verschachtelten Shadow-DOM-Baum die Parts für keine anderen Vorfahren außer dem direkten Elternteil sichtbar sind. Das exportparts-Attribut löst diese Einschränkung, indem es bereits definierte part-Namen explizit exportiert und sie global stilisierbar macht.

Pseudoklassen (wie ::part(label):hover) können an den ::part()-Selektor angehängt werden, aber strukturelle Pseudoklassen, die basierend auf Bauminformationen übereinstimmen, wie :empty und :last-child, können nicht angehängt werden.

Zusätzliche Pseudoelemente, wie ::before, können an den ::part()-Selektor angehängt werden, aber zusätzliche ::part()-Elemente können nicht angehängt werden. Zum Beispiel stimmt ::part(confirm-button)::part(active) nie überein, d.h. es ist nicht dasselbe wie ::part(confirm-button active). Dies liegt daran, dass dadurch mehr strukturelle Informationen preisgegeben würden, als beabsichtigt ist.

Syntax

::part(<ident>+) { /* ... */ } 

Beispiele

HTML

<template id="tabbed-custom-element"> <style> *, ::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <div part="tab active">Tab A</div> <div part="tab">Tab B</div> <div part="tab">Tab C</div> </template> <tabbed-custom-element></tabbed-custom-element> 

CSS

tabbed-custom-element::part(tab) { color: blue; border-bottom: transparent solid 4px; } tabbed-custom-element::part(tab):hover { background-color: black; color: white; } tabbed-custom-element::part(tab active) { border-color: blue !important; } 

JavaScript

const template = document.querySelector("#tabbed-custom-element"); globalThis.customElements.define( template.id, class extends HTMLElement { constructor() { super().attachShadow({ mode: "open" }).append(template.content); } }, ); 

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• part-Attribut
• :state() Pseudoklassenfunktion
• exportparts-Attribut
• CSS shadow parts-Modul