Tutorial by Examples

Native implementations The <template> element is implemented in every modern browsers: Chrome, Edge, Firefox, Opera, Safari, ... Custom Elements customElements.define(), Shadow DOM attachShadow() and HTML Imports <link rel="import"> are implemented in the latest ver...

Use a <template> element to design a HTML template that you can then reuse in your code. <template id="Template1"> Hello, World ! <template> <div id="Target1"></div> <script> Target1.appendChild( Template1.content.cloneNode( tr...

Create a new HTML tag named <hello-world> that will display "Hello, World!": <script> //define a class extending HTMLElement class HelloWorld extends HTMLElement { connectedCallback () { this.innerHTML = 'Hello, World!' } } //register the new custom elem...

Add a Shadow DOM to a div that will display "Hello, World!" instead of its initial content. <div id="Div1">intial content</div> <script> var shadow = Div1.attachShadow( { mode: 'open' } ) shadow.innerHTML = "Hello, World!" </script>...

Import an HTML file that will add a div with "Hello, World!" at the end of the main document's DOM tree. Imported file hello.html: <script> var div = document.createElement( 'div' ) div.innerHTML = 'Hello, World!' document.body.appendChild( div ) </script> Mai...

This example combines Custom Element, Template, Shadow DOM and HTML Import to display a the "Hello, World!" string in HTML. In file hello-world.html: <!-- 1. Define the template --> <template> Hello, World! </template> <script> var template = document....