exportparts 属性

exportparts 属性は、Shadow tree（シャドウツリー）内にあるすべての要素で使用できる属性です。exportparts 属性は、ネストしたシャドーツリーにおいて、親となるシャドーツリーに対し、要素がもつパーツ要素（part 属性を持つ要素）をエクスポートします。

例えば、下記のように #example-custom-element-outer と #example-custom-element-inner が入れ子になっており、カスタム要素（example-custom-element）に挿入されたとします。

<template id="example-custom-element-outer">
  <example-custom-element-inner></example-custom-element-inner>
</template>

<template id="example-custom-element-inner">
  <span part="part-01">01</span>
  <span part="part-02">02</span>
  <span part="part-03">03</span>
</template>

<!-- ↓に JavaScript で #example-custom-element-outer を挿入 -->
<example-custom-element></example-custom-element>

この時、下記のようにスタイルを指定しても、<span part="part-01">01</span> および <span part="part-02">02</span> にこのスタイルは適用されません。

<style>
  example-custom-element::part(part-01 part-02) {
    color: red;
  }
</style>

なぜなら、::part() 疑似要素がマッチするのは、シャドーホストである example-custom-element 要素内でシャドウルートとなる、#example-custom-element-outer がもつパーツ要素のみだからです。

このような状況で、<span part="part-01">01</span> と <span part="part-02">02</span> にスタイルを適用したい場合、exportparts 属性を使用して、親のシャドーツリーにパーツ要素をエクスポートします。

<template id="example-custom-element-outer">
  <example-custom-element-inner exportparts="part-01, part-02"></example-custom-element-inner>
</template>

<template id="example-custom-element-inner">
  <span part="part-01">01</span>
  <span part="part-02">02</span>
  <span part="part-03">03</span>
</template>

また、もし下記のようなスタイルが指定されているとき、

<style>
  example-custom-element::part(foo) {
    color: red;
  }
</style>

<span part="part-01">01</span> をこのスタイルが適用されるように（part-01 を foo として）エクスポートしたい場合は、下記のようにコロン（:）で区切って記述することも可能です。

<template id="example-custom-element-outer">
  <example-custom-element-inner exportparts="part-01 : foo"></example-custom-element-inner>
</template>

<template id="example-custom-element-inner">
  <span part="part-01">01</span>
  <span part="part-02">02</span>
  <span part="part-03">03</span>
</template>

この場合、<span part="part-02">02</span> はエクスポートされていない状態になるため、スタイルは適用されず、<span part="part-01">01</span> のみ、文字色が赤くなることになります。

下記のように、複数の指定をすることも可能です。

<style>
  example-custom-element::part(foo) {
    color: red;
  }
  example-custom-element::part(bar) {
    color: blue;
  }
</style>

<template id="example-custom-element-outer">
  <example-custom-element-inner exportparts="part-01 : foo, part-02 : bar"></example-custom-element-inner>
</template>

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