Web Components

Web Components are Reusable UI Widgets

Web Components are portable, reusable, bundled units of HTML, JavaScript and CSS.  An existing Web Component can be used without writing new code, simply by adding an import statement to an HTML page. 

Built Using Four Technologies

1. Templates - define inert reusable markup
2. Custom Elements - extend HTML
3. Shadow DOM - provides encapsulation of markup and styling

4. Imports - support bundling html, javascript and CSS files

Templates

• Defining template tags 
• Activating templates
• Injecting data
• Nested templates

Template Tag

1. The markup in the tag is not immediately rendered to the page; it is inert until it is cloned on the page.
2. The markup in the tag is hidden from traditional selection techniques because it is not traversed like other DOM elements; use the content property of the template to access the elements inside.
3. Place the template tag anywhere on the page (head, body, etc.)

<template><p>This is a template!</p></template>

Template Activation

<template id="my-template">
  <p>This is a template!</p>
</template>

 

<script>
  var temp = document.querySelector('#my-template');
  var clone = document.importNode(temp.content, true);
  document.body.appendChild(clone);
<script>

Inject Dynamic Data (4 Steps)

Inject data before cloning by manipulating the template clone

1. Get a reference to the template 
var template = document.querySelector('template');

2. Use document.importNode to clone the template's content  
var clone = document.importNode(template.content, true);

3. Change the target element within the template as desired
clone.querySelector('.adjective').textContent = 'neat';

4. Append element to page
document.body.appendChild(clone);

Nested Templates

Manually clone both parent and child templates if templates are nested

<template id="outer-template">
  <template id="inner-template"><p>This is a template!</p></template>
</template>
<script>
  var outerTemplate = document.querySelector(#outer-template);
  var innerTemplate = document.querySelector(#inner-template);
  var outerClone = document.importNode(template.content);
  var innerClone = document.importNode(template.content);
  document.body.appendChild(outerClone);
  document.outerClone.appendChild(innerClone);
<script>

Custom Elements

Custom Elements

Two core functionalities:

 

1. Define your own HTML element (name must have a

      dash - think of the first dash as a namespace)

 

 

2. Extend existing elements by adding an 'is' attribute ​

<input type="text" is="search">

<ek-lego-car />

Registering and Using Custom Elements (3 Steps)

1. Create a prototype for the custom element

var LegoCar = Object.create(HTMLElement.prototype);
// Add properties and functions to prototype here

 

2. Register the element via registerElement

document.registerElement('lego-car');

 

3. Use it: Add to DOM or place tag on the page

document.body.appendChild(new LegoCar());
  or 
<lego-car>

   

Shadow DOM

Shadow DOM

Shadow DOM provides encapsulation for the JavaScript, CSS, and templating in a Web Component. A Shadow DOM makes it so these things remain separate from the DOM of the main document.  A Shadow DOM must always be attached to an existing element.

Create the Shadow DOM (3 Steps)

1. Select a shadow host
2. Create a shadow root

3. Add elements 

<template>
  <h1>Hello from the shadow DOM!</h1>
</template>

<div id="host>
  <script>
    var host = document.querySelector('template');
    var root = host.createShadowRoot();     
    root.appendChild(document.importNode(template.content, true));
  </script>
</div>

Imports

Using Imports

• Both templates and imports are a way to store inert HTML
• Imports have two unique qualities:

1. Support storing HTML in another file
2. Support bundling HTML, CSS and JavaScript

Using Imports

<link rel="import" href="component.html" />

• Brings in everything that is in the  "import location"
• Imported HTML is inert until you clone it onto the page
• Imported JavaScript and CSS are applied immediately

Web Components are Neat

Check out Polymer!