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
Blink, the web engine that currently implements Custom Element v1 (in Chrome v53+ for example) only supports autonomous custom elements: see open Blink bug. If you want to define customized built-in elements (i.e. <button> extension), you’ll need to use a polyfill like the one from Web Reflection. Alternatly, you can still use the Custom Element … Read more
Because of the isolation of styles, which is a feature of Shadow DOM, you cannot define a global CSS rule that will be applied in the Shadow DOM scope. It could be possible with CSS variables but they should be implemented explicitly in the shadowed component (which is not the case with this 3rd party … Read more
How adding/removing input elements dynamically possible? Yes, it is possible, you can add/remove input elements dynamically, But for that you need to take care of few things: 1- Proper binding of events. 2- Array to store the values of each input element separately. 3- When user fill value in any input element then updating only … Read more
All browsers support a finite list of HTML elements which are considered as “known”. Elements which are unknown (e.g <city>, <person>) do not generally throw errors with the HTML parser in modern browsers and instead inherit from HTMLUnknownElement. In older versions of IE however, such elements would be inserted into the DOM as an empty … Read more
In the main file, use <script> to load the Javascript file x-counter.js. In the Javascript file, use fetch() to load the HTML code x-counter.html. In the HTML file, use <link rel=”stylesheet”> to load the CSS file x-counter.css. CSS file : x-counter.css button, p { display: inline-block; color: dodgerblue; } HTML file : x-counter.html <link rel=”stylesheet” … Read more
The ::content pseudo-element is being replaced in future implementations of Web Components / Shadow DOM with the ::slotted pseudo-element. Likewise, the element targeted by this pseudo-element has changed from <content to <slot> in the latest version of the Shadow DOM specification. You can see related discussion about that change here. Currently browsers still support <content> … 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
@int32_t is right in that Shadow DOM, by definition, is a way to fill a node with DOM that you want to hide from external sources (Encapsulation). The point is that you as the component author get to choose exactly which parts will be exposed to outside CSS or JavaScript and which will not. Unfortunately, … Read more