You can use @import to include shared CSS files. HTML import is still pending in the standard committee; should come soon. For now HTML template needs to go w

You can use @import to include shared CSS files. HTML import is still pending in the standard committee; should come soon. For now HTML template needs to go with the Javascript. I usually structure a component like the following. The nice thing about WebComponent is everything is scoped to the component and you can have pretty generic names for things except the defined component name ("component1" in this case). /components/component1.js import cu from "/util/comp-util.js"; import comp2 from "/components/component2.js"; import comp3 from "/components/component3.js"; (function() { let template = ` <template> <style> @import "/styles/shared.css"; @import "/components/component1.css"; </style> <div id="the_component" class="component1"> <button /> <component2 attr1="green" attr2="10" ... /> <component3 ... /> ... </div> </template>`; class ComponentElement extends HTMLElement { constructor() { super(); cu.attachTemplate(this, templete); // the attachment boiler-plate code in util. } ... } window.customElements.define("component1", ComponentElement); }());