Web ComponentsReal World

Jarrod Overson jarrodoverson.com

Web Componentsa.k.a.

outside of Google

Web Components?What are

Templates Custom Elements Shadow DOM HTML Imports (and more…)

Web Components

HTML Templates

<script type="text/x-template"> <h1>Hello World!</h1> </script>

<div style="display:none"> <p>I am cloned over and over!</p> </div>

( traditionally )

HTML Templates

<template> <p>I don’t exist yet!</p> </template>

now(ish)!

Benefits

1. Inert 2. No .innerHTML 3. It makes sense

Custom Elements

❯ MyEl = document.registerElement('my-el'); function my-el() { [native code] } !❯ var el = new MyEl(); undefined !❯ el.outerHTML; "<my-el></my-el>"

OH NO!Not XML!

Benefits

1. Legit new elements 2. Can inherit from the old 3. Make your own semantics

Shadow DOM❯ outer = document.createElement('div'); <div></div> !❯ inner = document.createElement('p') <p></p> !❯ inner.innerText = 'Hello jqcon!'; "Hello jqcon!" !❯ outer.createShadowRoot().appendChild(inner); <p>Hello jqcon!</p> !❯ document.body.appendChild(outer); <div></div>

Shadow DOM

Shadow DOM

Shadow DOM

Shadow DOM

Benefits

1. Proper encapsulation 2. Style boundaries 3. You can use IDs again!

❯ document.querySelector(‘#sameId’); !❯ el.shadowRoot.querySelector(‘#sameId’);

HTML Imports

<link rel=“import" href="external.html">

Benefits

1. It gets stuff out of your stuff

Support for each

<template>

registerElement

Shadow DOM

HTML Imports

Wat

Why am I even here?

Web Components?Why even bother with

Web Components

are part of a fundamental shift in how

the web evolves

The web learns best from itself

getElementsBySelector CoffeeScript Everything CSS ever From what you do

Spec writers make things possible

The community’s job is to make them easy

oi jQuery, tip o’ the hat

Web Components?Ok, so how do I use

Polyfills for emerging features

and a framework for building upon them

<polymer-element name="hello-world"> <script> Polymer('hello-world', {}); </script> </polymer-element>

What happened to <element>?

proto = Object.create(HTMLElement.prototype); HelloWorld = document.registerElement( ‘hello-world', { prototype : proto });

vs Native

<polymer-element name="hello-world"> <template> <div>Hello World</div> </template> <script> Polymer('hello-world', {}); </script> </polymer-element>

<template id="hw-template"> <div>Hello World</div> </template> !<script> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var template = document.getElementById('hw-template'); var clone = document.importNode(template.content, true); this.createShadowRoot().appendChild(clone); }; HelloWorld = document.registerElement( 'hello-world', { prototype : proto } ); </script>

vs Native

Yay!

“

”

- polymer-project.org

Boo!

So what’s the reality?

Parent with crappy, leaky

styles

Sexy scoped web component

chrome 34 with flags turned on

IE 10 with defaults

firefox 26.0 with defaults

chrome 32 with defaults

The reality?

It’s largely thereAfter all,

the component did render.

and you do get useful lifecycle methods

and Polymer does give you sexy data binding

Shadow DOM is not very polyfillable.

Why would I use Web Components

when I have

directives?

How do

work together?

and

Demo!

Web Components are useful

and important.

The bleeding edge is accessible

but you need excuses to use it

1. Prototypes

Make your prototypes with the bleeding edge

Attach a cost to backwards compatibility.

2. Internal Tools

Internally, browser compatibility

doesn’t need to matter.

IE 8 doesn’t exist when you will it away.

3. Native Apps

Do you really need a web server?

Or do you just love web tech?

1. node-webkit 2. brackets-shell 3. CEF 4. Packaged Apps

Demo!

Jarrod Overson

jsoverson.com/githubjsoverson.com/linkedin

jsoverson.comjsoverson.com/google+

jarrod@jsoverson.com

jsoverson.com/twitter

@jsoverson