Use of Template with HTML Custom Elements

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

How to let imported css font / icons have effects on elements in the shadow dom?

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

Nested element (web component) can’t get its template

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

tech