Custom Elements, Shadow DOM & Templates in HTML by Examples

credit: blog.teamtreehouse.com/create-custom-html-elements-2

Creating Custom Elements

Here is an example which demonstrate creating custom elements:

Creating custom elements by example

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.

Creating custom elements with ShadowDOM by example

Using Templates for ShadowDOM with Custom Elements

Creating custom elements with ShadowDOM and template by example

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

Source

Originally published at xameeramir.github.io.