part

part全局属性包含元素的部分名称的以空格分隔的列表。部分名称允许通过::part伪元素在影子树中选择和样式化特定元素。

demo.html
demo.css
demo.js

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

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

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

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

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;
}

const template = document.getElementById("tabbed-custom-element");

globalThis.customElements.define(template.id, class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content);

    let tabs = [];
    let children = this.shadowRoot.children;

    for(let 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';
      })
    })
  }
})

exportparts

exportparts全局属性允许用户通过导出它们的部分名称，选择和样式化存在于嵌套的影子树中的元素。

影子树是一个隔离的结构，其中的标识符、类和样式不能被属于常规DOM的选择器或查询所访问。要通过在其外部创建的CSS规则将样式应用于存在于影子树中的元素，必须使用part全局属性。必须将其分配给存在于影子树中的元素，其值应该是某个标识符。存在于影子树外部的规则必须使用::part伪元素，其中包含与参数相同的标识符。

全局属性part使元素仅在单个深度级别上可见。当影子树嵌套时，部分仅对影子树的父级可见，而不对其祖先可见。向下导出部分正是exportparts属性的作用。

exportparts属性必须放置在影子宿主上，即附加了影子树的元素。该属性的值应该是一个以逗号分隔的部分名称列表，这些部分名称存在于影子树中，并且应该通过当前结构之外的 DOM 提供。

demo.html
demo.css
demo.js

<my-component></my-component>

my-component::part(btn) {
    color: red;
}

globalThis.customElements.define('my-button', class extends HTMLElement {
  constructor() {
      super()
      const shadow = this.attachShadow({ mode: "open" });
      shadow.innerHTML = `
          <button part="btn">click</button>
      `
  }
}) 

globalThis.customElements.define('my-component', class extends HTMLElement {
   constructor() {
       super()
       const shadow = this.attachShadow({ mode: "open" });
       shadow.innerHTML = `
           <my-button exportparts="btn"></my-button>
       `
   }
}) 

part​

exportparts​

part

exportparts