Web Component Getting started with Web Component
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
| Components | Specification | Last Release |
|---|---|---|
| HTML Templates | W3C HTML5 Recommendation | 2014-10-28 |
| Custom Elements | W3C Working Drafts or WHATWG HTML and DOM Living Standard | 2016-10-13 |
| Shadow DOM | W3C Working Drafts or WHATWG HTML and DOM Living Standard | 2017-01-16 |
| HTML Imports | W3C Working Drafts | 2016-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:
- for Custom Elements: from WebReflection or Webcomponents.org,
- for Shadow DOM: from Webcomponents.org,
- for Template : from Neovov,
- for HTML Imports: from Webcomponents.org
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>
