Web Component Getting started with Web Component Hello World example
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>
