HTML Tag Reference

part 属性

シャドーツリー内の要素に名前を付ける

part 属性は、Shadow tree（シャドウツリー）内にあるすべての要素で使用できる属性です。

part 属性には、空白で区切って複数の名前を指定することができます。用途としては、class 属性に近いと考えるとわかりやすいでしょう。

part 属性によって付与した名前は、::part 擬似要素を用いて指定することで、該当する要素にスタイルを適用することができます。

part 属性は、HTML Standard 仕様ではなく、CSS Shadow Parts 仕様で定義されています。

part 属性の仕様

この属性を使用できる要素
  • すべての HTML 要素

part 属性のサンプルソース

<template id="tabbed-custom-element">
  <style>
    :host {
      display: flex;
    }
    tabbed-custom-element::part(tab) {
      color: #0c0c0dcc;
      border-bottom: transparent solid 2px;
    }
    tabbed-custom-element::part(active) {
      color: #0060df;
      border-color: #0a84ff;
    }
  </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>

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。