customElementsのアップグレード待ち処理

customElements技術を用いてWebComponentsを作成した場合、利用するHTMLからプロパティ操作などを実行したいケースがあります。

customElementsはレンダリング後に機能をロードしてアップグレードし、undefined→definedと状態遷移します。

undefinedの段階で処理が走ってしまうと、対応する機能が存在しないため結果的に何も起こりません。

customElements.whenDefined('my-component').then()を利用するとPromiseでアップグレード後に処理を実行でき、HTML上のスクリプトタグからでもカスタムコンポーネントを操作できます。

また、CSSには:definedセレクタがあり、:note(:defined)とセットで状態別のスタイルを定義できます。