Element.part

part は Element インターフェイスのプロパティで、この要素の部品識別子（すなわち part 属性を使用して設定されたもの）を DOMTokenList で返します。これらはシャドウ DOM の部品を ::part 擬似要素でスタイル付けするために使用することができます。

構文

js

let elementPartList = element.part

例

以下は、 shadow-part の例から抜粋したものです。ここでは、 part 属性を使用してシャドウ部品を見つけ、 part プロパティを使用して各タブの部品識別子を変更し、タブがクリックされたときに正しいスタイルがアクティブなタブに適用されるようにしています。

js

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

  console.log(tab.part);
})

仕様書

Specification
CSS Shadow Parts
# idl

ブラウザーの互換性

BCD tables only load in the browser

関連情報