元素:part 属性

partElement 接口的一个属性,表示元素的部件标识符(即使用 part 属性设置),以 DOMTokenList 的形式返回。可以通过 ::part 伪元素,使用这些标识符来为 Shadow DOM 的部件设置样式。

一个 DOMTokenList 对象。

示例

以下摘录来自我们的 shadow-part 示例。这里,part 属性用于查找 shadow 部分,然后 part 属性用于更改每个选项卡的部分标识符,以便在单击选项卡时将正确的样式应用于活动选项卡。

js
const tabs = [];
const children = this.shadowRoot.children;

for (const elem of children) {
  if (elem.getAttribute("part")) {
    tabs.push(elem);
  }
}

tabs.forEach((tab) => {
  tab.addEventListener("click", (e) => {
    tabs.forEach((tab) => {
      tab.part = "tab";
    });
    e.target.part = "tab active";
  });

  console.log(tab.part);
});

规范

规范
CSS Shadow 部分
# idl

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅