--- title: '::part()' slug: 'Web/CSS/::part' tags: - '::part' - CSS - Draft - Experimental - NeedsBrowserCompatibility - NeedsExample - Pseudo-element - Reference - Selector translation_of: 'Web/CSS/::part' ---
{{CSSRef}}

该 ::part CSS 伪元素 表示在 阴影树 中任何匹配 {{HTMLAttrxRef("part")}} 属性的元素。

custom-element::part(foo) {
  /* 样式作用于 `foo` 部分 */
}

语法

{{CSSSyntax}}

示例

HTML

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

<tabbed-custom-element></tabbed-custom-element>

CSS

tabbed-custom-element::part(tab) {
  color: #0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0d19;
  border-color: #0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0d33;
}

tabbed-custom-element::part(tab):focus {
  box-shadow:
    0 0 0 1px #0a84ff inset,
    0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

tabbed-custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}

JavaScript

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

结果

{{EmbedLiveSample('Examples')}}

规范

规范 状态 注释
{{SpecName("CSS Shadow Parts", "#part", "::part")}} {{Spec2("CSS Shadow Parts")}} 初始定义.

浏览器兼容性

{{Compat("css.selectors.part")}}

相关阅读