Angularでwebcomponentsを利用するときに発生したエラー

半年ぶりにwebcomponentsを触ったら、何もわからんという状態になったので起こったエラーと回避方法、発生条件を記載していく。

大体Angular Elementsでwebcomponentsを作成して、Angular上で動作確認している。

DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "tag名" has already been used with this registry

Angular上だと２つ以上webcomponentsをimportすると発生するっぽい。
描画は普通にされる

TypeError: n.createShadowRoot is not a function

WebComponents側でencapsulation: ViewEncapsulation.Nativeが設定されていると上記エラーが発生する。

なお、生のHTMLからだと普通に利用できたりする。(Deprecationは出る)(正確に言うとchrome 80だと表示できたがfirefox 75だと表示されなかった)

参考