@font-faceルールで定義されたカスタムフォントは、CSSOM（CSS Object Model）ツリーに登録される。
CSSOMツリーはグローバルなスコープを持つため、ドキュメント全体で利用可能。
<style> @font-face { font-family: 'MyCustomFont'; src: url('mycustomfont.woff2') format('woff2'); } </style> <div id="host"></div> <script> const host = document.getElementById('host'); const shadowRoot = host.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <style> p { font-family: 'MyCustomFont', sans-serif; } </style> <p>このテキストはカスタムフォントで表示されます。</p> `; </script>
Shadow DOM内のp要素は、グローバルに定義されたMyCustomFontを利用して表示される。フォントの定義がカプセル化の対象外であり、ドキュメント全体で共有されるリソースであるため。
