CSS Reference

::part()

特定のpart属性値をもつ要素にスタイルを適用する

::part() 疑似要素は、指定された引数と一致する part 属性値を持つ Shadow tree（シャドウツリー）内の任意の要素にスタイルを適用します。

::part() 疑似要素は、オリジンとなる要素が Shadow host（シャドウホスト）である場合にのみマッチします。オリジンとなる要素の Shadow root（シャドウルート）がもつ、パーツ要素（part 属性が付与された要素）の part 属性値と、引数がマッチした場合、スタイルが適用されることになります。

なお、引数には、複数の値を空白区切りで指定することが可能です。

また、custom-element::part(foo):hover や custom-element::part(foo)::before のように、別の疑似クラスや疑似要素を重ねることもできますし、:state() 疑似クラスを使用して、custom-element::part(checkbox):state(checked) のように状態を指定することもできます。

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

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する疑似要素

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome