2

mdi が Web コンポーネント内で動作していないように見えますが、何か見落としがありますか?

依存関係をカプセル化する Web コンポーネントを開発したいのですが、親ドキュメントへのリンクを追加すると機能しますが、元の意図に違反します。

<html>
<body>
<x-webcomponent></x-webcomponent>
<script>
customElements.define(
  "x-webcomponent",
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `
        <style>@import url('https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css');</style>
        <span class="mdi mdi-home"></span>
      `;
    }
  }
);
</script>
</body>
</html>

https://codepen.io/Jamesgt/pen/MWwvJaw

4

1 に答える 1