Custom Elements, Shadow DOM & Templates in HTML by Examples

Custom Elements

Courtesy

Creating Custom Elements

Here is an example which demonstrate creating custom elements:

Using ShadowDOM with Custom Elements

Shadow DOM is a way to encapsulate DOM of our custom component. This encapsulation means that the style sheet and javascript logic of our app is combined into that shadow DOM element.

Using Templates for ShadowDOM with Custom Elements

The ShadowDOMs can also be provided with HTML templates like so:

Source