External Styling for CustomElements V1 & ShadowDOM

Question

Whilst this may seem to be a duplicate question those asked previously have been based around Polymer, not native CustomElements, and this is about the css itself, not penetrating the ShadowDOM or Custom CSS Properties / Variables

So here we have a simple Custom Element (note: as of writing this only works in newer Chrome versions)

class StyleMe extends HTMLElement {
 constructor () {
  super();
  let shadow = this.attachShadow({ mode: 'closed' });
  shadow.appendChild(document.querySelector('#style-me').content.cloneNode(true));
 }
}
customElements.define('style-me', StyleMe);

h1 {
 /* even !important doesn't penetrate */
 color: red !important;
}

<h1>I'm a normal heading</h1>
<style-me>I'm heading hidden in style-me's shadow</style-me>
<template id="style-me">
 <style>
  :host {
   background: blue;
   display: block;
  }
  h1 {
   color: yellow;
  }
 </style>
 <h1><slot></slot></h1>
</template>

This demonstrates nicely how styles are isolated when using the ShadowDOM.

What would be nice to do is have the contents of the <style> inside <template> stored in an external file, possibly generated by a pre-processor such as less.

After much searching only to find answers related to Polymer I've draw a blank, any thoughts?

---

I am not looking for custom properties they would allow me to use

<style>
    :host {
        background: blue;
        display: block;
    }
    h1 {
        color: var(--something);
    }
</style>

And set the color using

style-me {
    --something: yellow;
}

My question is about moving

:host {
    background: blue;
    display: block;
}
h1 {
    color: yellow;
}

Out of a <style> tag and into a separate file

Answer 1

You can use the CSS @import url directive.

<template id="style-me">
    <style>
        @import url( '/css/style.css' )
    </script>
    <h1><slot></slot></h1>
</template>

The question was discussed here.

Answer 2

I realize this question is more than a year old now, but you might start looking at the constructible style sheet specification/proposal.

That would allow you to do something like:

const customStyleSheet = new CSSStyleSheet();
await customStyleSheet.replace("@import url('/css/style.css')");
shadowDOMReference.adoptedStyleSheets = [ customStyleSheet ];