![Page 1: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/1.jpg)
Why you should be using Web Components Now.And How.
PHIL @LEGGETTERHead of Developer Relations
1 / 157
![Page 2: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/2.jpg)
2 / 157
![Page 3: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/3.jpg)
3 / 157
![Page 4: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/4.jpg)
What we'll coverWhat are Web Components?The State of Web ComponentsComponentised Web Apps NowWhy Web Components are the Future!
4 / 157
![Page 5: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/5.jpg)
What are Web Components?5 / 157
![Page 6: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/6.jpg)
What are Web Components?Custom ElementsHTML TemplatesShadow DOMHTML Imports
6 / 157
![Page 7: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/7.jpg)
Custom Elements
7 / 157
![Page 8: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/8.jpg)
Elements - Structure & Meaning<!doctype html><html> <head> <meta charset="utf-8" /> <title>HTML Elements</title> <meta name="description" content="" /> <link rel="stylesheet" href="css/stylez.css" /> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> </ul> </nav> <header> <p>Hello world! This (part of) is HTML5 Boilerplate.</p> </header> <main> <article>Ohhhh. Interesting</article> </main> <footer>© me</footer> <script src="js/script.js"></script> </body></html>
8 / 157
![Page 9: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/9.jpg)
Elements in "apps"
9 / 157
![Page 10: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/10.jpg)
Elements. Arrrgghhh!
10 / 157
![Page 11: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/11.jpg)
<Custom Elements />
11 / 157
![Page 12: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/12.jpg)
<Custom Elements />
Bring semantic markup backMore than just markupIMHO the most important part of Web Components
12 / 157
![Page 13: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/13.jpg)
Custom Elements: A new Gmail<!doctype html><html> <head> <meta charset="utf-8"> <title>A new Gmail?</title> <meta name="description" content=""> </head> <body>
13 / 157
![Page 14: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/14.jpg)
Custom Elements: A new Gmail<!doctype html><html> <head> <meta charset="utf-8"> <title>A new Gmail?</title> <meta name="description" content=""> </head> <body>
<header> <img src="img/logo.png" alt="Google Logo" /> <gmail-search /> <gmail-account-strip /> </header>
14 / 157
![Page 15: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/15.jpg)
Custom Elements: A new Gmail<!doctype html><html> <head> <meta charset="utf-8"> <title>A new Gmail?</title> <meta name="description" content=""> </head> <body>
<header> <img src="img/logo.png" alt="Google Logo" /> <gmail-search /> <gmail-account-strip /> </header>
<gmail-side-bar> <nav is="gmail-labels"></nav> <gmail-contacts /> </gmail-sidebar>
15 / 157
![Page 16: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/16.jpg)
Custom Elements: A new Gmail<!doctype html><html> <head> <meta charset="utf-8"> <title>A new Gmail?</title> <meta name="description" content=""> </head> <body>
<header> <img src="img/logo.png" alt="Google Logo" /> <gmail-search /> <gmail-account-strip /> </header>
<gmail-side-bar> <nav is="gmail-labels"></nav> <gmail-contacts /> </gmail-sidebar>
<main> <nav is="gmail-categories"></nav> <gmail-email-list /> </main>
16 / 157
![Page 17: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/17.jpg)
Custom Elements: A new Gmail<!doctype html><html> <head> <meta charset="utf-8"> <title>A new Gmail?</title> <meta name="description" content=""> </head> <body>
<header> <img src="img/logo.png" alt="Google Logo" /> <gmail-search /> <gmail-account-strip /> </header>
<gmail-side-bar> <nav is="gmail-labels"></nav> <gmail-contacts /> </gmail-sidebar>
<main> <nav is="gmail-categories"></nav> <gmail-email-list /> </main>
<hangouts /> </body></html>
17 / 157
![Page 18: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/18.jpg)
Tools, Tips & Tricks for buildingComponentised Web Apps
18 / 157
![Page 19: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/19.jpg)
<img src="http://avatars.io/twitter/leggetter" />
<img src="http://avatars.io/instagram/leggetter" />
<img src="http://avatars.io/gravatar/[email protected]" />
<img src="http://api.skype.com/users/pleggetter/profile/avatar" />
Start Simple - An Avatar
19 / 157
![Page 20: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/20.jpg)
Custom Elements
<my-avatar service="twitter" username="leggetter" />
20 / 157
![Page 21: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/21.jpg)
Custom Elements
<my-avatar service="twitter" username="leggetter" />
<script>var MyAvatarPrototype = Object.create(HTMLElement.prototype);
21 / 157
![Page 22: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/22.jpg)
Custom Elements
<my-avatar service="twitter" username="leggetter" />
<script>var MyAvatarPrototype = Object.create(HTMLElement.prototype);
MyAvatarPrototype.createdCallback = function() { var username = this.getAttribute('username'); var service = this.getAttribute('service');
22 / 157
![Page 23: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/23.jpg)
Custom Elements
<my-avatar service="twitter" username="leggetter" />
<script>var MyAvatarPrototype = Object.create(HTMLElement.prototype);
MyAvatarPrototype.createdCallback = function() { var username = this.getAttribute('username'); var service = this.getAttribute('service');
var url = 'http://avatars.io/' + service + '/' + username;
23 / 157
![Page 24: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/24.jpg)
Custom Elements
<my-avatar service="twitter" username="leggetter" />
<script>var MyAvatarPrototype = Object.create(HTMLElement.prototype);
MyAvatarPrototype.createdCallback = function() { var username = this.getAttribute('username'); var service = this.getAttribute('service');
var url = 'http://avatars.io/' + service + '/' + username;
var img = document.createElement( 'img' ); img.setAttribute('src', url); this.appendChild(img);};
24 / 157
![Page 25: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/25.jpg)
Custom Elements
<my-avatar service="twitter" username="leggetter" />
<script>var MyAvatarPrototype = Object.create(HTMLElement.prototype);
MyAvatarPrototype.createdCallback = function() { var username = this.getAttribute('username'); var service = this.getAttribute('service');
var url = 'http://avatars.io/' + service + '/' + username;
var img = document.createElement( 'img' ); img.setAttribute('src', url); this.appendChild(img);};
document.registerElement('my-avatar', { prototype: MyAvatarPrototype});</script>
Define your own elements. 25 / 157
![Page 26: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/26.jpg)
<my-avatar service="twitter" username="leggetter" />
<my-avatar service="instagram" username="leggetter" />
<my-avatar service="twitter" username="forwardjs" />
<my-avatar />
26 / 157
![Page 27: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/27.jpg)
Custom Elements - Extending
<img is="my-avatar-ext" service="twitter" username="leggetter" />
27 / 157
![Page 28: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/28.jpg)
Custom Elements - Extending
<img is="my-avatar-ext" service="twitter" username="leggetter" />
<script>var MyAvatarExtPrototype = Object.create(HTMLImageElement.prototype);
28 / 157
![Page 29: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/29.jpg)
Custom Elements - Extending
<img is="my-avatar-ext" service="twitter" username="leggetter" />
<script>var MyAvatarExtPrototype = Object.create(HTMLImageElement.prototype);
MyAvatarExtPrototype.createdCallback = function() { var username = this.getAttribute('username'), service = this.getAttribute('service'), url = 'http://avatars.io/' + service + '/' + username;
this.setAttribute('src', url);};
29 / 157
![Page 30: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/30.jpg)
Custom Elements - Extending
<img is="my-avatar-ext" service="twitter" username="leggetter" />
<script>var MyAvatarExtPrototype = Object.create(HTMLImageElement.prototype);
MyAvatarExtPrototype.createdCallback = function() { var username = this.getAttribute('username'), service = this.getAttribute('service'), url = 'http://avatars.io/' + service + '/' + username;
this.setAttribute('src', url);};
document.registerElement('my-avatar-ext', { prototype: MyAvatarExtPrototype, extends: 'img'});</script>
Extending existing elements30 / 157
![Page 31: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/31.jpg)
Custom Elements - Lifecycle
createdCallbackattachedCallbackdetachedCallbackattributeChangedCallback(attrName, oldVal,newVal)
31 / 157
![Page 32: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/32.jpg)
Create Elements using JavaScript
<script>function createPhils() { var tooManyPhils = 104; var phils = 0; do { var el = document.createElement( 'my-avatar' ); el.setAttribute('service', 'twitter'); el.setAttribute('username', 'leggetter'); document.getElementById( 'phils' ).appendChild( el ); ++phils; } while( phils < tooManyPhils );}</script>
Create Phils
32 / 157
![Page 33: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/33.jpg)
Why Custom Elements?
33 / 157
![Page 34: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/34.jpg)
Templates
Native HTML Templating Support
34 / 157
![Page 35: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/35.jpg)
<script type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <div>{{body}}</div> </div></script>
35 / 157
![Page 36: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/36.jpg)
HTML Templates Create Avatar
<template id="my-avatar-template"> <style> .container { background-color: gold; } <!-- omitted for brevity --> </style> <div class="container"> <img class="avatar" /> <span class="username"></span> <span class="service"></span> </div></template>
36 / 157
![Page 37: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/37.jpg)
HTML Templates Create Avatar
<template id="my-avatar-template"> <style> .container { background-color: gold; } <!-- omitted for brevity --> </style> <div class="container"> <img class="avatar" /> <span class="username"></span> <span class="service"></span> </div></template>
var MyAvatarTmplPrototype = Object.create(HTMLElement.prototype);
MyAvatarTmplPrototype.createdCallback = function() { // get attributes & build url
37 / 157
![Page 38: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/38.jpg)
HTML Templates Create Avatar
<template id="my-avatar-template"> <style> .container { background-color: gold; } <!-- omitted for brevity --> </style> <div class="container"> <img class="avatar" /> <span class="username"></span> <span class="service"></span> </div></template>
var MyAvatarTmplPrototype = Object.create(HTMLElement.prototype);
MyAvatarTmplPrototype.createdCallback = function() { // get attributes & build url
var content = document.querySelector( '#my-avatar-template' ).content; var el = document.importNode( content, true );
38 / 157
![Page 39: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/39.jpg)
HTML Templates Create Avatar
<template id="my-avatar-template"> <style> .container { background-color: gold; } <!-- omitted for brevity --> </style> <div class="container"> <img class="avatar" /> <span class="username"></span> <span class="service"></span> </div></template>
var MyAvatarTmplPrototype = Object.create(HTMLElement.prototype);
MyAvatarTmplPrototype.createdCallback = function() { // get attributes & build url
var content = document.querySelector( '#my-avatar-template' ).content; var el = document.importNode( content, true );
el.querySelector( '.avatar' ).setAttribute( 'src', url ); el.querySelector( '.username' ).textContent = username; el.querySelector( '.service' ).textContent = service; this.appendChild( el );};
39 / 157
![Page 40: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/40.jpg)
HTML Templates Create Avatar
<template id="my-avatar-template"> <style> .container { background-color: gold; } <!-- omitted for brevity --> </style> <div class="container"> <img class="avatar" /> <span class="username"></span> <span class="service"></span> </div></template>
var MyAvatarTmplPrototype = Object.create(HTMLElement.prototype);
MyAvatarTmplPrototype.createdCallback = function() { // get attributes & build url
var content = document.querySelector( '#my-avatar-template' ).content; var el = document.importNode( content, true );
el.querySelector( '.avatar' ).setAttribute( 'src', url ); el.querySelector( '.username' ).textContent = username; el.querySelector( '.service' ).textContent = service; this.appendChild( el );};
document.registerElement('my-avatar-tmpl', { prototype: MyAvatarTmplPrototype
40 / 157
![Page 41: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/41.jpg)
Why native HTML Templates?
Libraries → NativeNative benefitsDocument fragment = lightweightInert until cloned/used
41 / 157
![Page 42: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/42.jpg)
Shadow DOM
DOM/CSS "scoping" / protection
42 / 157
![Page 43: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/43.jpg)
Shadow DOM - Already using it
43 / 157
![Page 44: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/44.jpg)
Shadow DOM - Problems it solves
44 / 157
![Page 45: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/45.jpg)
Styles <span class="container">Bleed!</span>
<template id="my-avatar-tmpl"> <style> .container { background-color: cyan; } ...
<my-avatar-tmpl service="twitter" username="leggetter" />
Styles Bleed! Create
Shadow DOM - Problems it solves
45 / 157
![Page 46: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/46.jpg)
Styles <span class="container">Bleed!</span>
<template id="my-avatar-tmpl"> <style> .container { background-color: cyan; } ...
<my-avatar-tmpl service="twitter" username="leggetter" />
Styles Bleed! Create
<template id="my-avatar-template"> <div class="container"> <img id="avatar" /> ...</template>
Global DOM e.g. id attributes
Shadow DOM - Problems it solves
46 / 157
![Page 47: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/47.jpg)
Shadow DOM - In Action Create ForwardJS
47 / 157
![Page 48: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/48.jpg)
Shadow DOM - In Action Create ForwardJS
<template id="my-avatar-shadow-tmpl"> <style> .container { background-color: red; color: white; } ... </style> <div class="container"> <img id="avatar" /> ... </div></template>
48 / 157
![Page 49: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/49.jpg)
Shadow DOM - In Action Create ForwardJS
<template id="my-avatar-shadow-tmpl"> <style> .container { background-color: red; color: white; } ... </style> <div class="container"> <img id="avatar" /> ... </div></template>
var MyAvatarShadowPrototype = Object.create(HTMLElement.prototype);
MyAvatarShadowPrototype.createdCallback = function() { // get attributes & build url
var content = document.querySelector( '#my-avatar-shadow-tmpl' ).content;
49 / 157
![Page 50: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/50.jpg)
Shadow DOM - In Action Create ForwardJS
<template id="my-avatar-shadow-tmpl"> <style> .container { background-color: red; color: white; } ... </style> <div class="container"> <img id="avatar" /> ... </div></template>
var MyAvatarShadowPrototype = Object.create(HTMLElement.prototype);
MyAvatarShadowPrototype.createdCallback = function() { // get attributes & build url
var content = document.querySelector( '#my-avatar-shadow-tmpl' ).content;
this.shadow = this.createShadowRoot(); this.shadow.appendChild( document.importNode( content, true ) );
50 / 157
![Page 51: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/51.jpg)
Shadow DOM - In Action Create ForwardJS
<template id="my-avatar-shadow-tmpl"> <style> .container { background-color: red; color: white; } ... </style> <div class="container"> <img id="avatar" /> ... </div></template>
var MyAvatarShadowPrototype = Object.create(HTMLElement.prototype);
MyAvatarShadowPrototype.createdCallback = function() { // get attributes & build url
var content = document.querySelector( '#my-avatar-shadow-tmpl' ).content;
this.shadow = this.createShadowRoot(); this.shadow.appendChild( document.importNode( content, true ) );
this.shadow.querySelector( '#avatar' ).setAttribute( 'src', url ); this.shadow.querySelector( '#username' ).textContent = username; this.shadow.querySelector( '#service' ).textContent = service;};
51 / 157
![Page 52: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/52.jpg)
Shadow DOM - In Action Create ForwardJS
<template id="my-avatar-shadow-tmpl"> <style> .container { background-color: red; color: white; } ... </style> <div class="container"> <img id="avatar" /> ... </div></template>
var MyAvatarShadowPrototype = Object.create(HTMLElement.prototype);
MyAvatarShadowPrototype.createdCallback = function() { // get attributes & build url
var content = document.querySelector( '#my-avatar-shadow-tmpl' ).content;
this.shadow = this.createShadowRoot(); this.shadow.appendChild( document.importNode( content, true ) );
this.shadow.querySelector( '#avatar' ).setAttribute( 'src', url ); this.shadow.querySelector( '#username' ).textContent = username; this.shadow.querySelector( '#service' ).textContent = service;};
document.registerElement('my-avatar-shadow', { prototype: MyAvatarShadowPrototype
52 / 157
![Page 53: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/53.jpg)
Why Shadow DOM?
DOM & CSS ScopingProtection for all: Page and ElementEncapsulation
53 / 157
![Page 54: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/54.jpg)
HTML Imports
Loading & Dependency Management
54 / 157
![Page 55: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/55.jpg)
HTML Imports - Example
Before
<link rel="stylesheet" href="bootstrap.css" /><link rel="stylesheet" href="fonts.css" /><script src="jquery.js"></script><script src="bootstrap.js"></script><script src="bootstrap-tooltip.js"></script><script src="bootstrap-dropdown.js"></script>
55 / 157
![Page 56: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/56.jpg)
HTML Imports - Example
Before
<link rel="stylesheet" href="bootstrap.css" /><link rel="stylesheet" href="fonts.css" /><script src="jquery.js"></script><script src="bootstrap.js"></script><script src="bootstrap-tooltip.js"></script><script src="bootstrap-dropdown.js"></script>
After
<link rel="import" href="bootstrap.html" />
56 / 157
![Page 57: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/57.jpg)
HTML Imports - Compositionteam-pusher.html
57 / 157
![Page 58: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/58.jpg)
HTML Imports - Compositionteam-pusher.html
<link rel="import" href="my-avatar-import.html" />
58 / 157
![Page 59: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/59.jpg)
HTML Imports - Compositionteam-pusher.html
<link rel="import" href="my-avatar-import.html" />
<template id="team-pusher-tmpl"> <style> </style>
<my-avatar-import service="twitter" username="maxthelion" /> <my-avatar-import service="twitter" username="copypastaa" /> ... <my-avatar-import service="twitter" username="leggetter" /></template>
...
59 / 157
![Page 60: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/60.jpg)
HTML Imports - Compositionteam-pusher.html
<link rel="import" href="my-avatar-import.html" />
<template id="team-pusher-tmpl"> <style> </style>
<my-avatar-import service="twitter" username="maxthelion" /> <my-avatar-import service="twitter" username="copypastaa" /> ... <my-avatar-import service="twitter" username="leggetter" /></template>
<script> var TeamPusherPrototype = Object.create(HTMLElement.prototype);
TeamPusherPrototype.createdCallback = function() { // Get template, createShadowRoot etc. };
document.registerElement('team-pusher', { prototype: TeamPusherPrototype });</script>
...
60 / 157
![Page 61: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/61.jpg)
HTML Imports - Composition Demo
<link rel="import" href="assets/team-pusher.html" />
<team-pusher></team-pusher>
61 / 157
![Page 62: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/62.jpg)
HTML Imports - Composition Demo
<link rel="import" href="assets/team-pusher.html" />
<team-pusher></team-pusher>
maxtheliontwitter
copypastaatwitter
zimbatmtwitter
loicdumastwitter
mdpyetwitter
olga_dukovatwitter
pawel_ledwontwitter
hamchapmantwitter
LaurieWang_twitter
swstaggtwitter
vivangkumartwitter
willsewell_twitter
davidrbiggstwitter
leggettertwitter
We're Hiring! pusher.com/jobs
62 / 157
![Page 63: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/63.jpg)
Why Use HTML Imports?Bundle JS/HTML/CSS → single URLBasic dependency managementSharing, Reuse, Composition
63 / 157
![Page 64: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/64.jpg)
Gotchas / Patterns!
64 / 157
![Page 65: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/65.jpg)
Get & use document from the currentScript
( function( currentScript ) {
var importDoc = currentScript.ownerDocument;
TeamPusherPrototype.createdCallback = function() { var content = importDoc.querySelector( '#team-pusher-tmpl' ).content; // ... };
} )( document._currentScript || document.currentScript );
65 / 157
![Page 66: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/66.jpg)
importNode and NOT cloneNode for Template
// Note: use ownerDocvar content = ownerDoc.querySelector( '#my-template' );
var clone = ownerDoc.importNode( content, true );
66 / 157
![Page 67: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/67.jpg)
You can't <link> into the Shadow DOM
<template> <link rel="stylesheet" href="path/to/style.css" /></template>
67 / 157
![Page 68: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/68.jpg)
The State of...
68 / 157
![Page 69: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/69.jpg)
The State of Custom Elements
isConcerns around Accessibility
Point of UpgradeWhen HTMLElement is transformed into Custom Element
69 / 157
![Page 70: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/70.jpg)
The State of Templates ✔
70 / 157
![Page 71: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/71.jpg)
The State of Shadow DOM
<content select="tag" />Declarative element content placement
71 / 157
![Page 72: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/72.jpg)
The State of Shadow DOM
<content select="tag" />Declarative element content placement
element.createShadowRoot({ mode:'closed' });
protecting shadowRoot
72 / 157
![Page 73: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/73.jpg)
The State of Shadow DOM
<content select="tag" />Declarative element content placement
element.createShadowRoot({ mode:'closed' });
protecting shadowRoot.foo >>> div { color: red }
Shadow piercing combinators...
73 / 157
![Page 74: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/74.jpg)
The State of HTML Imports
74 / 157
![Page 75: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/75.jpg)
Firefox
https://hacks.mozilla.org/2014/12/mozilla-and-web-components/
“ Mozilla will not ship an implementation ofHTML Imports. We expect that once JavaScriptmodules ... is shipped, the way we look at thisproblem will have changed.
75 / 157
![Page 76: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/76.jpg)
Essential "State of" Reading
Wilson Page - The State of Web ComponentsMicrosoft Edge Team - Bringing componentization to the web: Anoverview of Web Components
76 / 157
![Page 77: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/77.jpg)
The State of Browsers
77 / 157
![Page 78: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/78.jpg)
Microsoft Edge
78 / 157
![Page 79: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/79.jpg)
Apple's updated feedback on Custom Elements and Shadow DOM
From: Maciej Stachowiak <[email protected]> Date: Mon, 20 Jul 2015 18:17:24 -0700Message-id: <[email protected]> To: public-webapps <[email protected]>
A while back we sent a consolidated pile of feedback on the Web Components family of specs. In preparation for tomorrow's F2F, here is an update on our positions. We've also changed the bugzilla links to point to relevant github issues instead.
We're only covering Custom Elements (the main expected topic), and also Shadow DOM (in case that gets discussed too).
I. ==== Custom Elements ====
A. ES6 classes / Upgrade / Synchronous Constructors 1. In general, we support the "synchronous constructors" approach to the "prototype swizzling" approach, as the lesser evil. While tricky to implement correctly, it makes a lot more sense and fits more naturally into the language. We are willing to do the work to make it feasible. 2. Custom elements should support initialization using an ES6 class constructo instead of a separate callback. <https://github.com/w3c/webcomponents/issues/139 <https://www.w3.org/Bugs/Public/show_bug.cgi?id=28541>> 3. We don’t think upgrading should be supported. The tradeoffs of different options have been much-discussed. <https://github.com/w3c/webcomponents/issues/134 <https://www.w3.org/Bugs/Public/show_bug.cgi?id=28544>> 4. Specifically, we don't really like the "Optional Upgrades, Optional Constructors" proposal (seems like it's the worst of both worlds in terms of complexity and weirdness) or the "Parser-Created Classes" proposal (not clear how this even solves the problem).
B. Insertion/Removal Callbacks 1. We think the current attached/detached callbacks should be removed. They don’t match core DOM concepts and insert/remove is a more natural bracket. The primitives should be insertedIntoDocument / removedFromDocument and inserted / removed. If you care about whether your document is rendered, look at its defaultView property. <https://github.com/w3c/webcomponents/issues/286> 2. We think inserted/removed callbacks should be added, for alignment with DOM. <https://github.com/w3c/webcomponents/issues/222>
C. Inheritance for Built-ins 1. We think support for inheritance from built-in elements (other than HTMLElement/SVGElement) should be omitted from a cross-browser v1. It raises complex implementation issues. <https://github.com/w3c/webcomponents/issues/133 <https://www.w3.org/Bugs/Public/show_bug.cgi?id=28547>>
D. Syntactic Sugar / Developer Ergonomics 1. We think it would be useful (perhaps post-v1) to make it simpler to create a custom element that is always instantiated with a shadow DOM from a template. Right now, this common use case requires script and a template in separate places, and a few lines of confusing
79 / 157
Safari
![Page 80: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/80.jpg)
Can I use ? Settingsweb components4 results found
# Global 67.55%
U.K. 70.69%
IE / Edge Firefox Chrome Safari Opera iOS Safari * Opera Mini * AndroidBrowser
* Chrome forAndroid
8
9
10
11
Edge
31
38
39
40
41
42
31
36
37
39
40
42
43
44
45
46
47
7
7.1
8
9
30
31
32
7.1
8.4
9
8
4.1
4.3
4.4
4.4.4
40 42
HTML templates - LS
Method of declaring a portion of reusable markup that is parsedbut not rendered until cloned.
Current aligned Usage relative Show all
80 / 157
State of Browser Support
![Page 81: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/81.jpg)
All is not Lost
81 / 157
![Page 82: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/82.jpg)
Browsers - with Polyfills
https://github.com/webcomponents/webcomponentsjs#browser-support82 / 157
![Page 83: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/83.jpg)
Componentised Web Apps Now83 / 157
![Page 84: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/84.jpg)
Christian Heilmann - July 1st, 2015
‘ When we asked the very captive and eliteaudience of EdgeConf about Web Components,nobody raised their hand that they are using themin real products.
84 / 157
![Page 85: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/85.jpg)
Componentised Web Apps Now -questions?
Should native browser support stop us thinking about building componentised
web apps?
85 / 157
![Page 86: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/86.jpg)
Componentised Web Apps Now -questions?
Should native browser support stop us thinking about building componentised
web apps?
No!
86 / 157
![Page 87: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/87.jpg)
Componentised Web Apps Now -questions?
Should native browser support stop us thinking about building componentised
web apps?
No!
Should we be build componentised web apps anyway?
87 / 157
![Page 88: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/88.jpg)
Componentised Web Apps Now -questions?
Should native browser support stop us thinking about building componentised
web apps?
No!
Should we be build componentised web apps anyway?
We're already building web apps out of components right now!
88 / 157
![Page 89: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/89.jpg)
JavaScript
Libraries & Frameworks
89 / 157
![Page 90: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/90.jpg)
AngularJS
90 / 157
![Page 91: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/91.jpg)
AngularJS<script src="js/angular.min.js"></script>
91 / 157
![Page 92: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/92.jpg)
AngularJS<script src="js/angular.min.js"></script>
<script>angular.module('demo', []) .directive('ngAvatar', function () { return {
92 / 157
![Page 93: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/93.jpg)
AngularJS<script src="js/angular.min.js"></script>
<script>angular.module('demo', []) .directive('ngAvatar', function () { return {
restrict:"AEC",
93 / 157
![Page 94: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/94.jpg)
AngularJS<script src="js/angular.min.js"></script>
<script>angular.module('demo', []) .directive('ngAvatar', function () { return {
restrict:"AEC",
scope: { service: '@', username: '@' },
94 / 157
![Page 95: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/95.jpg)
AngularJS<script src="js/angular.min.js"></script>
<script>angular.module('demo', []) .directive('ngAvatar', function () { return {
restrict:"AEC",
scope: { service: '@', username: '@' },
template: '<img src="http://avatars.io/' + '{{service}}/{{username}}" />' }; });</script>
<body ng-app="demo">
95 / 157
![Page 96: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/96.jpg)
AngularJS<script src="js/angular.min.js"></script>
<script>angular.module('demo', []) .directive('ngAvatar', function () { return {
restrict:"AEC",
scope: { service: '@', username: '@' },
template: '<img src="http://avatars.io/' + '{{service}}/{{username}}" />' }; });</script>
<body ng-app="demo">
<ng-avatar service="twitter" username="leggetter" />
96 / 157
![Page 97: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/97.jpg)
AngularJS<script src="js/angular.min.js"></script>
<script>angular.module('demo', []) .directive('ngAvatar', function () { return {
restrict:"AEC",
scope: { service: '@', username: '@' },
template: '<img src="http://avatars.io/' + '{{service}}/{{username}}" />' }; });</script>
<body ng-app="demo">
<ng-avatar service="twitter" username="leggetter" />
97 / 157
![Page 98: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/98.jpg)
EmberJS
98 / 157
![Page 99: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/99.jpg)
EmberJS<script src="js/jquery-1.10.0.min.js"></script>
99 / 157
![Page 100: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/100.jpg)
EmberJS<script src="js/jquery-1.10.0.min.js"></script>
<script src="js/handlebars.js"></script>
100 / 157
![Page 101: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/101.jpg)
EmberJS<script src="js/jquery-1.10.0.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/ember.js"></script>
101 / 157
![Page 102: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/102.jpg)
EmberJS<script src="js/jquery-1.10.0.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/ember.js"></script>
<script> var App = Ember.Application.create();
App.EmAvatarComponent = Ember.Component.extend({
102 / 157
![Page 103: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/103.jpg)
EmberJS<script src="js/jquery-1.10.0.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/ember.js"></script>
<script> var App = Ember.Application.create();
App.EmAvatarComponent = Ember.Component.extend({
url: function () { return 'http://avatars.io/' + this.get( 'service' ) + '/' + this.get( 'username' ); }.property( 'username' , 'service' ) });</script>
103 / 157
![Page 104: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/104.jpg)
EmberJS<script src="js/jquery-1.10.0.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/ember.js"></script>
<script> var App = Ember.Application.create();
App.EmAvatarComponent = Ember.Component.extend({
url: function () { return 'http://avatars.io/' + this.get( 'service' ) + '/' + this.get( 'username' ); }.property( 'username' , 'service' ) });</script>
<script type="text/x-handlebars" id="components/em-avatar"> <img {{bind-attr src=url}} /></script>
104 / 157
![Page 105: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/105.jpg)
EmberJS<script src="js/jquery-1.10.0.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/ember.js"></script>
<script> var App = Ember.Application.create();
App.EmAvatarComponent = Ember.Component.extend({
url: function () { return 'http://avatars.io/' + this.get( 'service' ) + '/' + this.get( 'username' ); }.property( 'username' , 'service' ) });</script>
<script type="text/x-handlebars" id="components/em-avatar"> <img {{bind-attr src=url}} /></script>
<script type="text/x-handlebars"> {{em-avatar service="twitter" username="leggetter"}}</script>
http://jsbin.com/fexawujibe/2/edit?html,output105 / 157
![Page 106: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/106.jpg)
ReactJS
106 / 157
![Page 107: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/107.jpg)
ReactJS<script src="js/react.js"></script><script src="js/JSXTransformer.js"></script>
107 / 157
![Page 108: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/108.jpg)
ReactJS<script src="js/react.js"></script><script src="js/JSXTransformer.js"></script>
<script type="text/jsx">var ReAvatar = React.createClass({ render: function() { return ( <img src={"http://avatars.io/" + this.props.service + "/" + this.props.username} /> ); }});
108 / 157
![Page 109: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/109.jpg)
ReactJS<script src="js/react.js"></script><script src="js/JSXTransformer.js"></script>
<script type="text/jsx">var ReAvatar = React.createClass({ render: function() { return ( <img src={"http://avatars.io/" + this.props.service + "/" + this.props.username} /> ); }});
React.render( <ReAvatar service="twitter" username="leggetter" />, document.querySelector('re-avatar'));</script>
109 / 157
![Page 110: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/110.jpg)
ReactJS<script src="js/react.js"></script><script src="js/JSXTransformer.js"></script>
<script type="text/jsx">var ReAvatar = React.createClass({ render: function() { return ( <img src={"http://avatars.io/" + this.props.service + "/" + this.props.username} /> ); }});
React.render( <ReAvatar service="twitter" username="leggetter" />, document.querySelector('re-avatar'));</script>
<re-avatar />
110 / 157
![Page 111: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/111.jpg)
ReactJS<script src="js/react.js"></script><script src="js/JSXTransformer.js"></script>
<script type="text/jsx">var ReAvatar = React.createClass({ render: function() { return ( <img src={"http://avatars.io/" + this.props.service + "/" + this.props.username} /> ); }});
React.render( <ReAvatar service="twitter" username="leggetter" />, document.querySelector('re-avatar'));</script>
<re-avatar />
111 / 157
![Page 112: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/112.jpg)
112 / 157
![Page 113: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/113.jpg)
Polymer
<script src="webcomponentsjs/webcomponents.min.js"></script><link rel="import" href="polymer/polymer.html">
113 / 157
![Page 114: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/114.jpg)
Polymer
<script src="webcomponentsjs/webcomponents.min.js"></script><link rel="import" href="polymer/polymer.html">
<polymer-element name="po-avatar" attributes="service username">
114 / 157
![Page 115: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/115.jpg)
Polymer
<script src="webcomponentsjs/webcomponents.min.js"></script><link rel="import" href="polymer/polymer.html">
<polymer-element name="po-avatar" attributes="service username">
<template> <img src="http://avatars.io/{{service}}/{{username}}" /> </template>
115 / 157
![Page 116: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/116.jpg)
Polymer
<script src="webcomponentsjs/webcomponents.min.js"></script><link rel="import" href="polymer/polymer.html">
<polymer-element name="po-avatar" attributes="service username">
<template> <img src="http://avatars.io/{{service}}/{{username}}" /> </template>
<script> Polymer('po-avatar', {}); </script></polymer-element>
116 / 157
![Page 117: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/117.jpg)
Polymer
<script src="webcomponentsjs/webcomponents.min.js"></script><link rel="import" href="polymer/polymer.html">
<polymer-element name="po-avatar" attributes="service username">
<template> <img src="http://avatars.io/{{service}}/{{username}}" /> </template>
<script> Polymer('po-avatar', {}); </script></polymer-element>
<po-avatar service="twitter" username="leggetter" />
117 / 157
![Page 118: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/118.jpg)
Polymer
<script src="webcomponentsjs/webcomponents.min.js"></script><link rel="import" href="polymer/polymer.html">
<polymer-element name="po-avatar" attributes="service username">
<template> <img src="http://avatars.io/{{service}}/{{username}}" /> </template>
<script> Polymer('po-avatar', {}); </script></polymer-element>
<po-avatar service="twitter" username="leggetter" />
118 / 157
![Page 120: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/120.jpg)
Who's using? ...
Angular DirectivesEmber Components
120 / 157
![Page 121: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/121.jpg)
Who's using? ...
Angular DirectivesEmber ComponentsReact Components
121 / 157
![Page 122: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/122.jpg)
Who's using? ...
Angular DirectivesEmber ComponentsReact ComponentsKnockoutJS Components
122 / 157
![Page 123: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/123.jpg)
Who's using? ...
Angular DirectivesEmber ComponentsReact ComponentsKnockoutJS ComponentsVue.js Components
123 / 157
![Page 124: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/124.jpg)
Who's using? ...
Angular DirectivesEmber ComponentsReact ComponentsKnockoutJS ComponentsVue.js ComponentsBackbone Components
124 / 157
![Page 125: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/125.jpg)
Who's using? ...
Angular DirectivesEmber ComponentsReact ComponentsKnockoutJS ComponentsVue.js ComponentsBackbone ComponentsCanJS Components
125 / 157
![Page 126: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/126.jpg)
Who's using? ...
Angular DirectivesEmber ComponentsReact ComponentsKnockoutJS ComponentsVue.js ComponentsBackbone ComponentsCanJS ComponentsFamous Components
126 / 157
![Page 127: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/127.jpg)
Who's using? ...
Angular DirectivesEmber ComponentsReact ComponentsKnockoutJS ComponentsVue.js ComponentsBackbone ComponentsCanJS ComponentsFamous ComponentsAnything.JS Components?
127 / 157
![Page 128: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/128.jpg)
Who's Building Componentised Web Apps now?Angular, Ember, Backbone, Knockout, React, Vue.js, Web Components with Polyfills, Polymer
...
128 / 157
![Page 129: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/129.jpg)
Who's Building Componentised Web Apps now?Angular, Ember, Backbone, Knockout, React, Vue.js, Web Components with Polyfills, Polymer
...
You are!<ng-avatar service="twitter" username="leggetter" />
vs.
<my-avatar service="twitter" username="leggetter" />
129 / 157
![Page 130: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/130.jpg)
Who's Building Componentised Web Apps now?Angular, Ember, Backbone, Knockout, React, Vue.js, Web Components with Polyfills, Polymer
...
You are!<ng-avatar service="twitter" username="leggetter" />
vs.
<my-avatar service="twitter" username="leggetter" />
That's the HOW130 / 157
![Page 131: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/131.jpg)
Why Web Components are the future!
131 / 157
![Page 132: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/132.jpg)
1. You're already building componentisedweb apps
If you're not, you probably should be
132 / 157
![Page 133: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/133.jpg)
2. Trends/Alignment
133 / 157
![Page 134: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/134.jpg)
Libraries
Alignment toward Web ComponentsAngular - DirectivesEmber - ComponentsKnockout - ComponentsPolymer - build upon Web ComponentsAngular 2...
134 / 157
![Page 135: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/135.jpg)
http://guides.emberjs.com/v1.13.0/components/
‘ Ember's implementation of components hews asclosely to the Web Components specification aspossible. Once Custom Elements are widelyavailable in browsers, you should be able to easilymigrate your Ember components to the W3Cstandard and have them be usable by otherframeworks.
135 / 157
![Page 136: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/136.jpg)
136 / 157
![Page 137: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/137.jpg)
Have a Strategy
Will libraries update to use Web Components?Align with Web Components to make migrating easier
Split UI rendering and business logic
137 / 157
![Page 138: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/138.jpg)
Browser Vendor Support
Google ✔Opera ✔Mozilla ✔Microsoft ✔Apple ✔
138 / 157
![Page 139: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/139.jpg)
Dashboard Get Started Design Develop Publish Community WPDev Feedback
Microsoft Edge Developer
Welcome to the Microsoft Edge Developer Suggestion Box!
The Microsoft Edge team is looking for feature requests from the web developer and designer community. Categories
include (but certainly are not limited to) HTML, CSS, JavaScript, Performance, and Developer Tools. If you do not have
a suggestion at this time, you may still cast your vote for the features you would like to see supported!
This feedback will help us with planning and to better understand how web developers and designers are using the
platform. Top standards-based feature requests will also be copied over to http://dev.modern.ie/platform/status/, where
you can track its development status.
Note that this forum is intended for web platform feature suggestions. Related feedback channels:
Microsoft Edge application feedback (or use the Windows Feedback app in Windows Technical Preview)
Microsoft Edge feedback on Windows Phone
For specific bugs, please log an issue on the Connect site
Finally – a few guidelines and notes to keep things running smoothly:
1. Please be sure to search for ideas before entering a new suggestion. This helps to accrue the votes correctly.
2. Please enter a separate suggestion for each idea (avoid entering a suggestion with multiple ideas) and share
some information if possible on the most important scenarios that this enables for you. This helps to keep things
clear as to what people are voting for.
3. The items and rankings on this site are an important input, but do not reflect the final priority list for the Microsoft
Edge engineering team.
4. We will moderate suggestions made in the forum if they do not represent an actual feature request or are
inappropriate.
5. Please do not send any novel or patentable ideas, copyrighted materials, samples or demos which you do not
want to grant a license to Microsoft. See the Terms of Service for more information.
Microsoft Edge DeveloperPost a new idea…
All ideas
My feedbackAccessibility 4
CSS 59
Document Object Model (DOM) 7
Extensions 12
F12 Developer Tools 119
Graphics 21
HTML 49
JavaScript 61
Media 14
Miscellaneous 45
Networking 22
Performance 17
Security 1
New and returning users may sign in
Search 139 / 157
3. Demand
![Page 140: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/140.jpg)
4. Encourages good softwaredevelopment
Component-based Development
140 / 157
![Page 141: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/141.jpg)
Separation of Concerns<!doctype html><html> <head> <meta charset="utf-8"> <title>A new Gmail?</title> <meta name="description" content=""> </head> <body>
<header> <img src="img/logo.png" alt="Google Logo" /> <gmail-search /> <gmail-account-strip /> </header>
<gmail-side-bar> <nav is="gmail-labels"></nav> <gmail-contacts /> </gmail-sidebar> <main> <nav is="gmail-categories"></nav> <gmail-email-list /> </main>
<hangouts /> </body></html>
141 / 157
![Page 142: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/142.jpg)
Encapsulation
Shadow DOM - Style & DOM encapsulationDoes NOT offer JavaScript protection
Hacky Custom Element
leggettertwitter
Don't click me!
142 / 157
![Page 143: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/143.jpg)
Loose Coupling
Custom EventsElement API (interface)Or use existing messaging frameworks
143 / 157
![Page 144: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/144.jpg)
Custom Events<script> var CustomEventPrototype = Object.create(HTMLElement.prototype); CustomEventPrototype.createdCallback = function() { // Build element ...
this.addEventListener('click', function() { var customEvent = new CustomEvent('cheese'); this.dispatchEvent(customEvent); }.bind(this)); };
// ...
144 / 157
![Page 145: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/145.jpg)
Custom Events<script> var CustomEventPrototype = Object.create(HTMLElement.prototype); CustomEventPrototype.createdCallback = function() { // Build element ...
this.addEventListener('click', function() { var customEvent = new CustomEvent('cheese'); this.dispatchEvent(customEvent); }.bind(this)); };
// ...
var customEl = document.getElementById('my_custom_ev'); customEl.addEventListener('cheese', function() { alert('cheese fired!'); });</script>
<custom-event-ex id="my_custom_ev"></custom-event-ex>
145 / 157
![Page 146: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/146.jpg)
Element API Attributes & Methods<script> CustomEventPrototype.startSpin = function() { this.img.classList.toggle('spin'); };
CustomEventPrototype.stopSpin = function() { this.img.classList.toggle('spin'); };
// ...
var spinEl = document.getElementById('spin_el'); spinEl.startSpin();
// ...
spinEl.stopSpin();</script>
<custom-event-ex id="spin_el"></custom-event-ex>
146 / 157
![Page 147: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/147.jpg)
Supports Change
EncapsulationLoose Coupling
147 / 157
![Page 148: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/148.jpg)
Encourage Reuse
Ease of SharingComposition
<link rel="import" href="https://some-cdn.com/my-avatar.html" />
148 / 157
![Page 149: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/149.jpg)
High Cohesion
myavatar.html├── js/script.js├── css/styles.css└── img/bg.png
149 / 157
![Page 150: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/150.jpg)
Problems? Solved in the future?
HTML ImportsVulcanize | HTTP2 | JavaScript modules
Shared scripts?CacheMultiple versions?
JavaScript scoping in v2Better cross-component communication?Allow <link> for CSS in Shadow DOM?
150 / 157
![Page 151: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/151.jpg)
SummaryCustom Elements - Awesome
151 / 157
![Page 152: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/152.jpg)
Summary
Custom Elements - Awesome
HTML Templates, Shadow DOM, HTML Imports- Native FTW
152 / 157
![Page 153: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/153.jpg)
Summary
Custom Elements - Awesome
HTML Templates, Shadow DOM, HTML Imports- Native FTW
You can & are building componentised webapps now - Align
153 / 157
![Page 154: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/154.jpg)
Summary
Custom Elements - Awesome
HTML Templates, Shadow DOM, HTML Imports- Native FTW
You can & are building componentised webapps now - Align
Trends & "best practice" ♥ Web Components
154 / 157
![Page 155: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/155.jpg)
Summary
Custom Elements - Awesome
HTML Templates, Shadow DOM, HTML Imports- Native FTW
You can & are building componentised webapps now - Align
Trends & "best practice" ♥ Web Components
Web Components are the future!
155 / 157
![Page 156: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/156.jpg)
Resourceshttp://webcomponents.org/https://www.polymer-project.orgWilson Page - The State of Web ComponentsChristian Heilmann - Web Components are an Endangered SpeciesAre we compontentized yet (podcast)Eric Bidelman's Google IO 2014 talkAngular MaterialGoogle Material DesignHTML Template ChooserIE UserVoice forumSource for these slideshttp://pusher.com - easily add realtime messaging to your apps
156 / 157
![Page 157: Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015](https://reader030.vdocument.in/reader030/viewer/2022032513/55d0a73dbb61eb89598b4795/html5/thumbnails/157.jpg)
Why you should be using Web Components Now.And How.
Questions?
leggetter.github.io/web-components-now
PHIL @LEGGETTERHead of Developer Relations
157 / 157