HTML Living Standard/exportparts属性

exportparts属性

exportparts属性は、シャドウDOM内で定義されたパーツを外部に公開するために使用される属性です。この属性により、コンポーネントの内部パーツを外部のスタイルシートや他のコンポーネントがアクセスできるように公開することができます。カンマ区切りで複数のパーツ名を指定し、外部とのパーツ名のマッピングを行います。

基本構文

<element exportparts="part1, part2"></element>

exportparts属性では、シャドウDOM内で使用されているパーツ名を外部に公開するためにマッピングします。

使用例

以下に、exportparts属性を使用した具体的な例を示します。

<template id="custom-card">
  <style>
    ::part(header) {
      font-size: 24px;
      color: blue;
    }

    ::part(body) {
      font-size: 16px;
      color: gray;
    }
  </style>
  <div>
    <div part="header">カードのタイトル</div>
    <div part="body">カードの内容</div>
  </div>
</template>

<script>
  class CustomCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: "open" });
      const template = document.getElementById("custom-card");
      shadow.appendChild(template.content.cloneNode(true));
    }
  }

  customElements.define("custom-card", CustomCard);
</script>

<custom-card exportparts="header, body"></custom-card>

この例では、<custom-card>コンポーネント内でシャドウDOMが定義され、exportparts属性を使用してheaderとbodyパーツを外部に公開しています。これにより、外部スタイルシートや他のコンポーネントがこれらのパーツを操作できるようになります。

外部からのスタイリング

外部のスタイルシートで公開されたパーツをスタイリングするには、::part()疑似要素を使用します。

custom-card::part(header) {
  background-color: lightblue;
}

custom-card::part(body) {
  padding: 10px;
}

このスタイルでは、headerとbodyのパーツがそれぞれ別々にスタイリングされます。

パーツ名のマッピング

exportparts属性では、カンマ区切りで複数のパーツ名を指定できます。これにより、シャドウDOM内のパーツ名と外部のスタイルシートで使用するパーツ名とのマッピングが可能になります。

<element exportparts="header=title, footer=content"></element>

この例では、シャドウDOM内のheaderをtitleという名前で外部に公開し、footerをcontentという名前で外部に公開しています。

注意点

exportparts属性で公開されたパーツは、外部からアクセス可能ですが、内部シャドウDOMの構造やスタイルが完全に公開されるわけではありません。
exportparts属性を使用してパーツ名を公開することで、外部のスタイルシートやスクリプトがそのパーツにアクセスし、スタイリングや操作を行えるようになります。
外部でスタイリング可能なパーツは、::part()疑似要素を利用して、適切に操作できます。

互換性

exportparts属性は、主要なモダンブラウザでサポートされていますが、最新の仕様に基づく実装を確認することが重要です。最新のブラウザ環境で動作するかを確認してから使用することを推奨します。

参考文献

exportparts属性

基本構文

使用例

外部からのスタイリング

パーツ名のマッピング

注意点

互換性

関連項目

参考文献