::part()

Baseline 已廣泛支援

此特性已經十分成熟，可在許多裝置和瀏覽器版本上使用。自 2020 年 7 月以來，它已在各大瀏覽器中可用。

::part CSS 偽元素表示影子樹中任何具有匹配part屬性的元素。

css

custom-element::part(foo) {
  /* Styles to apply to the `foo` part */
}

描述

全域性part屬性使影子樹元素對其父 DOM 可見。使用 part 屬性宣告的部分名稱用作 ::part() 偽元素的引數。透過這種方式，你可以從影子樹外部對其中的元素應用 CSS 樣式。

部分名稱類似於 CSS 類：多個元素可以具有相同的部分名稱，單個元素可以具有多個部分名稱。::part() 偽元素中使用的所有部分名稱都必須存在於影子樹元素上宣告的 part 值中，但部分名稱的順序無關緊要，即選擇器 ::part(tab active) 和 ::part(active tab) 是相同的。

::part() 偽元素僅對其父 DOM 可見。這意味著當影子樹巢狀時，部分對除直接父級以外的任何祖先都不可見。exportparts 屬性透過顯式匯出已定義的 part 名稱來解決此限制，使其可在全域性範圍內進行樣式設定。

偽類（例如 ::part(label):hover）可以附加到 ::part() 選擇器，但基於樹資訊匹配的結構偽類，例如 :empty 和 :last-child，不能附加。

附加偽元素，例如 ::before，可以附加到 ::part() 選擇器，但不能附加附加的 ::part() 元素。例如，::part(confirm-button)::part(active) 永遠不會匹配任何內容，即它與 ::part(confirm-button active) 不同。這是因為這樣做會暴露超出預期範圍的結構資訊。

語法

css

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

示例

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

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

結果

規範

規範
CSS 影子部分 # part

瀏覽器相容性

另見

part 屬性
:state() 偽類函式
exportparts 屬性
CSS 陰影部分模組

幫助改進 MDN

瞭解如何貢獻

此頁面由MDN 貢獻者最後修改於2025 年 7 月 14 日。

在 GitHub 上檢視此頁面 • 報告此內容的問題