::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.

css
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

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

Beispiele

HTML

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

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

js
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::part

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch