Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
Web Components Widely available

Autonomous custom elements

Web Components の中核技術の一つで、フレームワークに依存しない再利用可能なカスタム要素を定義できます。Shadow DOMと組み合わせることでスタイルのカプセル化も実現し、異なるプロジェクトやフレームワーク間でコンポーネントを共有できます。すべての主要ブラウザでサポートされており、実用的な水準に達しています。

カスタム要素コンポーネント

概要

Web Components の中核技術の一つで、フレームワークに依存しない再利用可能なカスタム要素を定義できます。Shadow DOMと組み合わせることでスタイルのカプセル化も実現し、異なるプロジェクトやフレームワーク間でコンポーネントを共有できます。すべての主要ブラウザでサポートされており、実用的な水準に達しています。

対応ブラウザ

デスクトップ

Chrome 54+
Edge 79+
Safari 10.1+
Firefox 63+

モバイル

Chrome Android 54+
Safari iOS 10.3+
Firefox Android 63+

基本構文

HTML 
class MyCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div class="card">${this.getAttribute('title')}</div>`;
  }
}
customElements.define('my-card', MyCard);

実務での使いどころ

  • フレームワーク非依存のUIコンポーネント作成

    React、Vue、Angularなどのフレームワークに依存しない再利用可能なUI部品を作成し、異なるプロジェクトで共有できます。

注意点

  • カスタム要素名には必ずハイフンを含める必要があります（例: my-element）。ハイフンなしの名前は将来のHTML標準要素との衝突を避けるため使用できません。

アクセシビリティ

  • カスタム要素にはデフォルトのARIAロールがないため、適切なrole属性やaria-*属性を明示的に設定し、支援技術がコンポーネントの目的を理解できるようにしてください。

参考リンク