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.