DOM

Window.customElements プロパティ

 編集:2022.09.09 by T.A.

[Edge]。読取専用。→

Window 内の CustomElementRegistry オブジェクトへの参照を返します。

これにより、新しいカスタム要素を登録したり、以前に登録したカスタム要素に関する情報を取得したりすることができます。

構文
Window.customElements
Window Window

mdnより

このプロパティが使われている最も一般的な例は、新しいカスタム要素を定義・登録するために CustomElementRegistry.define() メソッドにアクセスすることです。例えば次のようにします。

let customElementRegistry = window.customElements;
customElementRegistry.define('my-custom-element', MyCustomElement);

しかし、ふつうは以下のように短縮します:

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

define()

mdn: リポジトリーにより多くの使用例がありますので参照してください。

HTML:

<cus>カスタム?</cus>

JavaScript:

D=window.customElements;  //=[object]:[object CustomElementRegistry]
	//define=[function]:function define() { [native code] }
	//get=[function]:function get() { [native code] }
	//upgrade=[function]:function upgrade() { [native code] }
	//whenDefined=[function]:function whenDefined() { [native code] }

なんか、得られてい?。

class TestEle extends HTMLSpanElement{
  constructor(){
    super();  // コンストラクターでは常に super を最初に呼び出してください
    // ここに要素の機能を記述します
  }
}
CER=window.customElements;
CER.define('cus', TestEle);

define()

¶編集中


テスト