1

I want to try Font Awesome icon fonts in Shadows DOM ,like this :

<script type="module">
var str = 
`
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<nav>
  Icon:<button class="button-icon icon-heart">Click Me!</button>
</nav>
<style>

</style>
`;
function make (){
    const template = document.createElement('template');
    template.innerHTML = str 
    class RCounter extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(template.content.cloneNode(true));
      }
    }
    window.customElements.define('r-demo', RCounter);
}
make()
</script>
<body>
    <h1>normal</h1>
    <r-demo></r-demo>
</body>

But the icon heart is not show on the button.Why ? Any suggestion is expected ,thanks.

BTW: I use http-server to serve these files ,you can install it by :

   node i http-server -g
reco
  • 305
  • 3
  • 10

0 Answers0