::part()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
Der ::part
CSS Pseudoelement repräsentiert jedes Element innerhalb eines Shadow-Baums, das ein passendes part
-Attribut besitzt.
custom-element::part(foo) {
/* Styles to apply to the `foo` part */
}
Beschreibung
Das globale part
-Attribut macht ein Shadow-Baum-Element für seinen übergeordneten DOM sichtbar. Die mit dem part
-Attribut deklarierten Part-Namen werden als Parameter des ::part()
-Pseudoelements verwendet. Dadurch können Sie CSS-Stile auf Elemente im Shadow-Baum von außerhalb anwenden.
Part-Namen ähneln CSS-Klassen: Mehrere Elemente können denselben Part-Namen haben, und ein einzelnes Element kann mehrere Part-Namen haben. Alle Part-Namen, die im ::part()
-Pseudoelement verwendet werden, müssen im part
-Wert des Shadow-Baum-Elements deklariert sein, aber die Reihenfolge der Part-Namen spielt keine Rolle, d.h., die Selektoren ::part(tab active)
und ::part(active tab)
sind identisch.
Das ::part()
-Pseudoelement ist nur für das übergeordnete DOM sichtbar. Das bedeutet, dass bei einem verschachtelten Shadow-Baum die Parts nicht für andere Vorfahren sichtbar sind, außer direkt für das übergeordnete DOM. Das exportparts
-Attribut löst diese Einschränkung, indem es bereits definierte part
-Namen explizit exportiert und damit global stilisierbar macht.
Pseudoklassen (wie ::part(label):hover
) können an den ::part()
-Selektor angehängt werden, aber strukturelle Pseudoklassen, die auf Basis von Baum-Informationen übereinstimmen (wie :empty
), anstelle von lokalen Element-Informationen (wie :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 wird ::part(confirm-button)::part(active)
niemals übereinstimmen, d.h., es ist nicht dasselbe wie ::part(confirm-button active)
. Dies liegt daran, dass dadurch mehr strukturelle Informationen offengelegt würden, als beabsichtigt.
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
Specification |
---|
CSS Shadow Parts # part |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::part |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
part
-Attribut:state()
Pseudoklassen-Funktionexportparts
-Attribut- CSS Shadow Parts-Modul