HTML Living Standard/part属性

part属性

part属性は、シャドウDOMの要素に対してパーツ名を指定するための属性です。この属性を利用することで、Webコンポーネント内のスタイリング可能な部分を特定し、CSSの::part()疑似要素を用いて外部からスタイリングすることが可能になります。

基本構文

part属性はカンマ区切りで複数のパーツ名を指定できます。

<div part="header, main-content, footer"></div>

この例では、要素に対して「header」「main-content」「footer」という3つのパーツ名が付けられています。

使用例

以下に、part属性を利用したシャドウDOMとそのスタイリングの例を示します。

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

    ::part(content) {
      font-size: 16px;
      color: gray;
    }
  </style>
  <div>
    <div part="title">カードのタイトル</div>
    <div part="content">カードの内容</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></custom-card>

この例では、<custom-card>コンポーネントがシャドウDOM内に定義され、外部のスタイルシートで::part()疑似要素を使って「title」および「content」の部分をスタイリングしています。

::part() 疑似要素

CSSの::part()疑似要素を使用することで、シャドウDOM内の特定のパーツを外部からスタイリングできます。たとえば、次のようなスタイルが可能です。

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

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

注意点

part属性はシャドウDOMが使用されていない場合、効果を持ちません。
part属性で指定されたパーツ名がなければ、対応する::part()疑似要素のスタイリングは適用されません。
外部からシャドウDOMの内部要素を直接スタイリングすることはできませんが、::part()疑似要素を使用することで、適切に指定されたパーツを操作できます。

互換性

part属性および::part()疑似要素は、現代の主要なブラウザでサポートされていますが、一部の古いブラウザでは動作しない可能性があります。プロジェクトで使用する場合、事前にブラウザの互換性を確認してください。

参考文献

part属性

基本構文

使用例

::part() 疑似要素

注意点

互換性

関連項目

参考文献