Getting started with Web Component

Download web-component eBook

Remarks

This section provides an overview of what Web Components are, and why a developer might want to use them.

Web Components are a set of new web technologies implemented in modern web browsers, and used to design reusable web elements with the only help of HTML, JavaScript and CSS.

Topics covered by the term Web Compoments are:

  • Custom Elements

  • HTML Templates

  • Shadow DOM

  • HTML Imports

These technologies are complementary, and can be used together or separately.

Versions

ComponentsSpecificationLast Release
HTML TemplatesW3C HTML5 Recommendation2014-10-28
Custom ElementsW3C Working Drafts or WHATWG HTML and DOM Living Standard2016-10-13
Shadow DOMW3C Working Drafts or WHATWG HTML and DOM Living Standard2017-01-16
HTML ImportsW3C Working Drafts2016-02-25

Availability

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.

Polyfills

For other browsers, you can use a polyfill library:

Custom Element - Hello World

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 element
customElements.define( 'hello-world', HelloWorld )
</script>

<!-- make use the custom element -->
<hello-world></hello-world>
 

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

<script>
  var template = document.currentScript.ownerDocument.querySelector( 'template' )   

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

In main file index.html :

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

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:

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

Main file index.html:

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

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 !
<template>

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

<script>
   Target1.appendChild( Template1.content.cloneNode( true ) )
</script>
 

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

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>

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

Stats

51 Contributors: 3
Sunday, March 19, 2017
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook