HTML Living Standard/ウェブコンポーネント

ウェブコンポーネント

ウェブコンポーネントは、モジュール化された再利用可能なカスタム要素を作成するための一連の標準技術です。これにより、HTML、CSS、およびJavaScriptを組み合わせた独立したコンポーネントを構築し、アプリケーション全体で再利用することができます。

ウェブコンポーネントは次の4つの主要な技術で構成されています。

1. カスタム要素 (Custom Elements)

カスタム要素は、独自の要素を定義して使用できるようにするAPIです。これは、従来のHTML要素のように動作しますが、独自の構造、スタイル、振る舞いを持たせることができます。

例

カスタム要素の作成

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); // シャドウDOMを添付
    this.shadowRoot.innerHTML = `<p>Hello, Web Components!</p>`;
  }
}
customElements.define('my-element', MyElement);

HTMLでの使用

<my-element></my-element>

2. シャドウDOM (Shadow DOM)

シャドウDOMは、要素の内部構造をカプセル化し、外部からのCSSやJavaScriptの影響を受けないようにする仕組みです。これにより、他のコードやスタイルとの競合を防ぐことができます。

例

シャドウDOMの使用

const template = document.createElement('template');
template.innerHTML = `
  <style>
    p { color: blue; }
  </style>
  <p>シャドウDOM内のスタイル</p>
`;

class MyShadowElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(template.content.cloneNode(true));
  }
}
customElements.define('my-shadow-element', MyShadowElement);

HTMLでの使用

<my-shadow-element></my-shadow-element>

3. HTMLテンプレート (HTML Templates)

<template> 要素は、レンダリングされないHTML構造を定義するために使用されます。このテンプレートは、必要なときにJavaScriptでインスタンス化できます。

例

HTMLテンプレートの使用

<template id="my-template">
  <p>テンプレートの中身</p>
</template>

<script>
  const template = document.getElementById('my-template');
  document.body.appendChild(template.content.cloneNode(true));
</script>

4. HTMLインポート (HTML Imports)

HTMLインポートは、他のHTMLファイルを現在のHTMLファイルにインポートする機能ですが、現在は非推奨です。代わりにJavaScriptモジュールを使用することが推奨されています。

例

JavaScriptモジュールの代替使用

import './my-component.js'; // 別ファイルのモジュールをインポート

実際の使用例

以下は、ウェブコンポーネントのすべての要素を統合した例です。

<template id="card-template">
  <style>
    .card {
      border: 1px solid #ccc;
      padding: 16px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  </style>
  <div class="card">
    <slot name="title"></slot>
    <slot name="content"></slot>
  </div>
</template>

<script>
  class CardComponent extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('card-template');
      shadow.appendChild(template.content.cloneNode(true));
    }
  }
  customElements.define('card-component', CardComponent);
</script>

<card-component>
  <span slot="title">カードタイトル</span>
  <p slot="content">カードのコンテンツ</p>
</card-component>

アクセシビリティ

ウェブコンポーネントを作成する際には、セマンティクスとアクセシビリティに注意する必要があります。適切なARIAロールやラベルを使用することで、スクリーンリーダーでの認識性を向上させることができます。

例

ARIAの使用

class AccessibleButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button aria-label="閉じる">✖</button>
    `;
  }
}
customElements.define('accessible-button', AccessibleButton);

ブラウザ対応

ウェブコンポーネントの主要機能（カスタム要素、シャドウDOM、HTMLテンプレート）は、モダンブラウザで広くサポートされています。ただし、古いブラウザではポリフィルが必要な場合があります。

HTML Living Standard/ウェブコンポーネント

ウェブコンポーネント

1. カスタム要素 (Custom Elements)

2. シャドウDOM (Shadow DOM)

3. HTMLテンプレート (HTML Templates)

4. HTMLインポート (HTML Imports)

実際の使用例

アクセシビリティ

ブラウザ対応

関連項目

関連仕様