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

Autonomous custom elements

:defined は CSS の擬似クラスで、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 (CustomElementRegistry.define() メソッドを使用して) 定義に成功したカスタム要素が含まれます。

css

/* 定義されたすべての要素を選択 */ :defined { font-style: italic; }

/* 特定の custom 要素のすべてのインスタンスを選択 */ custom-element:defined { display: block; }

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:defined
54
79
63
10
54
10
DOM API
CustomElementRegistry

CustomElementRegistry インターフェイスは、カスタム要素の登録と、登録された要素を照会するためのメソッドを提供します。このインスタンスを取得するには、window.customElements プロパティを使用してください。
54
79
63
10.1
54
10.3
define

define() は CustomElementRegistry インターフェイスのメソッドで、新しいカスタム要素を定義します。
54
79
63
10.1
54
10.3
define (disabledFeatures static property)

「disabledFeature」静的プロパティをサポートします
77
79
92
77
get

get() は CustomElementRegistry インターフェイスのメソッドで、以前定義したカスタム要素のコンストラクターを返します。
54
79
63
10.1
54
10.3
getName

CustomElementRegistry インターフェイスの getName() メソッドは、以前に定義されたカスタム要素の名前を返します。
117
117
116
17
117
17
upgrade

upgrade() は CustomElementRegistry インターフェイスのメソッドで、 Node サブツリー内のすべてのシャドウを含むカスタム要素を、メイン文書に接続する前であってもアップグレードします。
68
79
63
12.1
68
12.2
whenDefined

whenDefined() は CustomElementRegistry インターフェイスのメソッドで、指定した名前の要素が定義されたときに解決されるプロミス (Promise) を返します。
54
79
63
10.1
54
10.3
customElements

customElements は Window インターフェイスの読み取り専用プロパティで、 CustomElementRegistry オブジェクトへのリファレンスを返します。これにより、新しいカスタム要素を登録したり、以前に登録したカスタム要素に関する情報を取得したりすることができます。
54
79
63
10.1
54
10.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 「自律カスタム要素」はサポートされますが、「カスタマイズされた組み込み要素」はサポートされません。 バグ 182671 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 「自律カスタム要素」はサポートされますが、「カスタマイズされた組み込み要素」はサポートされません。 バグ 182671 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 「自律カスタム要素」はサポートされますが、「カスタマイズされた組み込み要素」はサポートされません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 「自律カスタム要素」はサポートされますが、「カスタマイズされた組み込み要素」はサポートされません。

基本構文

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

ライブデモ

basic customelement

CSS basic customelement demo.

プレビュー全画面表示

Attribute. watch

CSS Attribute. watch demo.

プレビュー全画面表示

raifusaikl

CSS raifusaikl demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク