web-dev-qa-db-ja.com

カスタム要素v1のコンストラクターとconnectedCallbackの違い

私はWeb開発に不慣れです。最近、カスタム要素v1について多くの議論と話し合いがありました。これにより、独自のカスタム動作を備えた独自の要素を定義したり、Shadow DOMを使用する場合はスコープ付きスタイルを定義したりできます。

this サイトでそれについて学んでいたとき、「カスタム要素の反応」の表が理解できませんでした。 「コンストラクタ」と「connectedCallback」の使用の違いと、「作成またはアップグレード」および「DOMに挿入」という用語について誰かが説明してくれませんか？.

追加情報として、私のカスタム要素の定義は別のファイルにあり、シャドウDOMを使用しています。 HTMLインポートを使用して、要素の定義をメインドキュメントにインポートしました。

javascripthtmlweb-componentshadow-domcustom-element
16
Shashank

ジュビアンがコメントですでに述べたように：

  • constructor()は、要素がcreatedのときに呼び出されます。
  • connectedCallback()は、要素がDOMにアタッチされたとき（後）に呼び出されます。

constructor() の呼び出しはカスタム要素に固有ではなく、HTML要素だけでなく、オブジェクトの作成（通常はnew演算子を使用して作成）で発生します。

constructor()呼び出しでは、シャドウDOMを作成できますが、通常のDOM内にノードを追加することはできません。また、属性を追加または設定することもできません。

アップグレードについて：

upgradeは、HTMLコードで宣言された不明なタグが後で定義されたときに発生します（customElements.define()メソッドによって）。 「不明」要素は「カスタム」要素になります。次に、constructor()およびconnectedCallback()メソッドが呼び出されます。

注：要素が作成され（不明として）、定義された場合、アタッチされた場合にのみアップグレードされます。

class CE extends HTMLElement {
  constructor() {
    super()
    console.info( 'constructed' )
  }
  connectedCallback() {
    console.info( 'connected' )
    this.innerHTML = 'Hello'  //can't be set in constructor()
  }
}


B1.onclick = function () {
  ce = document.createElement( 'c-e' )
  ce.textContent = 'unknown'
}

B2.onclick = function () {
  document.body.appendChild( ce )
}

B3.onclick = function () {
  customElements.define( 'c-e', CE)  
}
<button id=B1>create</button>
<button id=B2>attach</button>
<button id=B3>define</button>

上記のスニペットでさまざまな組み合わせを試してください。

  • 次に実行：1作成-2アタッチ-3定義
  • 次に実行：1作成-2定義-3アタッチ
  • 次に実行：1定義-2作成-3添付
25
Supersharp