::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 上查看此页面 • 报告此内容的问题