Element: part プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

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

DOMTokenList オブジェクトです。

以下は、 shadow-part の例から抜粋したものです。ここでは、 part 属性を使用してシャドウ部品を見つけ、 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);
});

仕様書

Specification
CSS Shadow Parts
# idl

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
part

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報