polyfill を使用して、しばらくの間カスタム要素v1を使用しています。 Chrome 54(ネイティブv1実装の最初のバージョン))は、要素を初期化するときにエラーをスローし始めました:
DOMException:「Document」で「createElement」を実行できませんでした:結果に子があってはなりません
問題の行は単純です:
let el = document.createElement('my-custom-element');
Chromeのネイティブ実装では、ポリフィルではなかった仕様要件が適用されているようです。仕様の「 カスタム要素コンストラクターの要件 」セクションによれば、
これは、createElementメソッドまたはcreateElementNSメソッドを使用するコンシューマーの期待に違反するため、要素が属性や子を取得してはなりません。
私が作成しようとしていた要素は、コンストラクターでそれ自体に子を追加しました。
解決策は、仕様の推奨に従うことでした。
一般に、作業は可能な限りconnectedCallbackに委ねる必要があります。特に、リソースのフェッチやレンダリングを含む作業はできるだけ延期する必要があります。ただし、connectedCallbackは複数回呼び出すことができるため、真に1回の初期化作業では、2回実行されないようにガードが必要になることに注意してください。
つまり、接続されたコールバックに子を追加し、フラグを使用して、要素が最初の接続でのみ初期化されるようにします。