Actually <template> elements can be imported from another document via HTML Imports, along with the Javascript code that will define the custom element: <link rel=”import” src=”https://stackoverflow.com/questions/52435955/my-custom-element.html”> … <custom-element></custom-element> So it doesn’t need to be included in a every HTML document. This post shows a minimal example. HTML Imports are implemented only in Chrome and Opera. … Read more
Does it have any performance implications…? Yes, it depends on how many instances, and on the CSS engine implemented in the browser. You’ll have to test every use case and take in account speed versus memory consumption. Is there a way to share the style node across multiple instances of the same web component? Yes, … Read more
To use an imported font (e.g., FontAwesome) in a Shadow DOM, you should: 1° Declare the Font First, include the <link rel=”stylesheet”> element in the main document. It will declare a @font-face CSS rule that will make the font available for all the text in the document. 2° Import the Stylesheet Then, import the same … Read more
document.currentScript contains a reference to the script that is currently parsed and executed. Therefore it is not valid anymore for your purpose when the constructor() function is called (from another script). Instead you shoud save its value in a variable at the beginning of the script, and use this variable in the constructor: <script> var … Read more