WEB COMPONENTSThe future of Web Application Development

goo.gl/rJkdPS

“Web Components are a set of emerging standards aimed at making reusable widgets.”

TO IMPROVE THE WEB

EncapsulationSemantics Widgets

goo.gl/e3hRRY

goo.gl/hyArLb

component driven model

AGENDA‣ The Specs

‣ Case Demo

‣ Browser Support

‣ Resources

‣ HTML Templates

‣ Custom Elements

‣ Shadow DOM

‣ HTML Imports

THE SPECS

‣ HTML Templates

‣ Custom Elements

‣ Shadow DOM

‣ HTML Imports

THE SPECS

goo.gl/Xariuv

“…provides a method for declaring document fragments in HTML.”

EARLIER FORMS

<div id=“myTemplate” hidden><h1></h1><img src=“” alt=“” />

</div>

EARLIER FORMS

<div id=“myTemplate” hidden><h1></h1><img src=“” alt=“” />

</div>

Rendered like any other element

Attempts made to retrieve

resources

Embedded scripts will run

LATER FORMS

<script type=“text/template”><h1></h1><img src=“” alt=“” />

</script>

LATER FORMS

<script type=“text/template”><h1></h1><img src=“” alt=“” />

</script>

Content is not rendered

Can be manipulated

via innerHTML

Exposes a XSS

vulnerability

THE NEW WAY

<template><h1></h1><img src=“” alt=“” />

</template>

THE NEW WAY

<template><h1></h1><img src=“” alt=“” />

</template>

Content is parsed but not

rendered

Content is inert until

cloned/used

Safe from XSS attacks

USING HTML TEMPLATES

// JavaScriptvar template = document.querySelector(‘template’), clone = template.content.cloneNode(true);

// Manipulationclone.querySelector(‘h1’).textContent = ‘Hello World’;clone.querySelector(‘img’).src = ‘hello-world.jpg’;

// Activatedocument.body.appendChild(clone);

DEMO

‣ HTML Templates

‣ Custom Elements

‣ Shadow DOM

‣ HTML Imports

THE SPECS

goo.gl/VZiFz4

“Provide a way for Web developers to build their own, fully-featured DOM elements.”

<div> soup

<section><nav>

<main>

<aside>

<article><time>

<header>

<footer> <figure><figcaption>

<audio><source>

<track> <video>

<canvas>

#GENERIC

DEFINE YOUR OWN ELEMENT// Register your element via JavaScriptvar xCounter = document.registerElement(‘x-counter’);

<!—- Use your element -—><x-counter></x-counter>

via HTML:

via JavaScript:

// Use your elementdocument.body.appendChild(new xCounter());

DEFINE YOUR OWN ELEMENT// Register your element via JavaScriptvar xCounter = document.registerElement(‘x-counter’,{

prototype: Object.create(HTMLElement.prototype)});

LIFECYCLE CALLBACKS// Define Custom Element Prototype Methodsvar xCounterProto = Object.create(HTMLElement.prototype);

xCounterProto.createdCallback = function() { /*..*/ };xCounterProto.attachedCallback = function() { /*..*/ };xCounterProto.detachedCallback = function() { /*..*/ };xCounterProto.attributeChangedCallback = function(attributeName, oldValue, newValue) { /*..*/ };

// Register your element via JavaScriptvar xCounter = document.registerElement(‘x-counter’, {

prototype: xCounterProto});

EXTEND EXISTING ELEMENTSvar xCounter = document.registerElement(‘x-counter’,{

prototype: Object.create(HTMLButtonElement.prototype),extends: “button”

});

document.body.appendChild(new xCounter());

<button is=“x-counter”></button>

HTML output:

DEMO

‣ HTML Templates

‣ Custom Elements

‣ Shadow DOM

‣ HTML Imports

THE SPECS

“provides markup, style and script encapsulation.”

<iframe>

simple encapsulation api

BROWSER VENDORS HAVE SECRETLY BEEN USING

THIS FOR YEARS!

CREATE A SHADOW ROOT<!—- HTML ELEMENT -—><div id=“host”>What a wonderful world.</host>

via JavaScript:

// Create shadow rootvar host = document.querySelector(‘#host’),

root = host.createShadowRoot();

// Populate shadow rootroot.innerHTML = “<style>h1 {color: green;}</style>” + “<h1>And I think to myself,</h1>”;

DEMO

where’s the content of the shadow host?

HOW IT WORKS

HOW IT WORKS

how do I display the shadow host content?

CONTENT INSERTION POINTS

goo.gl/ZZ6YCT

“A content insertion point is an insertion point to where the child nodes of the shadow host are

distributed.”

<content>

// Create shadow rootvar host = document.querySelector(‘#host’),

root = host.createShadowRoot();

// Populate shadow rootroot.innerHTML = ‘<style>h1 {color: lime;}</style>’ + ‘<h1>And I think to myself,</h1>’ ‘<content></content>’;

// Create shadow rootvar host = document.querySelector(‘#host’),

root = host.createShadowRoot();

// Populate shadow rootroot.innerHTML = ‘<style>h1 {color: green;}</style>’ + ‘<content select=“p”></content>’ + ‘<h1>And I think to myself,</h1>’ + ‘<content select=“h1”></content>’;

DEMO

‣ HTML Templates

‣ Custom Elements

‣ Shadow DOM

‣ HTML Imports

THE SPECS

http://goo.gl/upmKwp

“HTML documents that are linked as external resources from another HTML document.”

yeah…its called

AJAX!

#includes on the web

<link rel=“import” href=“x-counter.html” />

DECLARATIVE SYNTAX

<link rel=“import” href=“x-counter.html” />

<!—- Use Imported Web Component —-><x-counter></x-counter>

DECLARATIVE SYNTAX

ACCESS VIA JAVASCRIPT

var incHtml = document.querySelector(‘link[rel=import]’);console.log(incHtml.import);

CASE DEMO

BROWSER SUPPORT

jonrimmer.github.io/are-we-componentized-yet

FRAMEWORKS

polymer x-tagbosonic

RESOURCES

customelements.io

ebidel.github.io/webcomponents

webcomponents.org

QUESTIONS?

THANK YOU.