Getting started with Web Component


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 versions of Chrome and Opera.


For other browsers, you can use a polyfill library:

HTML Template - Hello World

Use a <template> element to design a HTML template that you can then reuse in your code.

<template id="Template1">
    Hello, World !

<div id="Target1"></div>

   Target1.appendChild( Template1.content.cloneNode( true ) )

This will insert the content of the template in the #Target1 div.

Custom Element - Hello World

Create a new HTML tag named <hello-world> that will display “Hello, World!”:

//define a class extending HTMLElement
class HelloWorld extends HTMLElement {
    connectedCallback () {
      this.innerHTML = 'Hello, World!'

//register the new custom element
customElements.define( 'hello-world', HelloWorld )

<!-- make use the custom element -->

Shadow DOM - Hello World

Add a Shadow DOM to a div that will display “Hello, World!” instead of its initial content.

<div id="Div1">intial content</div>

   var shadow = Div1.attachShadow( { mode: 'open' } )
   shadow.innerHTML = "Hello, World!" 

HTML Import - Hello World

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:

   var div = document.createElement( 'div' )
   div.innerHTML = 'Hello, World!'
   document.body.appendChild( div )

Main file index.html:

  <link rel="import" href="hello.html">

Hello World example

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 -->
   Hello, World!

  var template = document.currentScript.ownerDocument.querySelector( 'template' )   

  //2. Define the custom element
  customElements.define( 'hello-world', class extends HTMLElement 
          //3. Create a Shadow DOM
          var sh = this.attachShadow( { mode: 'open' } )
          sh.appendChild( document.importNode( template.content, true ) )
  } )

In main file index.html:

    <!-- 4. Import the HTML component --> 
    <link rel="import" href="hello-world.html">