シャドーDOMの使い方
shadow domとはカプセル化したdom treeを画面上のエレメントに動的にアタッチする手法のことです。このサブdom treeには外部cssの影響を受けず、独自で指定されたcssのみが適用されます。どういう場面で使うべきというと、外部のcss（例えばプロジェクト全体に影響を及ぼすstyle.css）の影響を受けたくない場合、html要素をshadow domにすれば実現可能です。
・基本的な使い方
let shadow = elementRef.attachShadow({mode: 'open'});
shadow domをつける要素に対してattachShadowメソッドを呼び出して、この要素にshadow rootをつけた同時に、それの参照をもらい、この要素自身もshadow hostとなります。
オプションmodeをopenにすると、elementRef.shadowRootで外部のJavascriptからshadow rootへのアクセスを可能になります。falseに設定すると、.shadowRoot呼び出してもnullしか返ってこなくなります。
attachShadow呼び出し前: element
attachShadow呼び出し後: element(shadow host) → shadow root
shadow.appendChild(document.createElement('b'));
shadow.appendChild(document.createElement('style'));
shadow dom treeはすでに作成済みです、中に要素をどんどん追加しましょう。追加されたstyley要素はshadow dom tree内にあるものにしか適用されないです。
appendChild呼び出し前：element(shadow host) → shadow root
appendChild呼び出し後：element(shadow host) → shadow root → b
作成されたdom要素をdev toolsでスクショをとってみた：
参考記事：
https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM