Use a remote stylesheet inside a template tag (with shadow dom)

Question

I am trying to make a semi-resuseable widget but I am running into a problem. I am trying to encapsulate a some CSS code inside a shadow root so that it does not affect the

Answer 1

I added the stylesheet's link element directly to the shadow root this way:

    let link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('href', 'whatever.css');
    this.shadowRoot.appendChild(link);

It seems to work fine. (I called this from the constructor of the component.)