Slide 1

Slide 1 text

Web Components: Getting Started #SOTB3, April '13

Slide 2

Slide 2 text

Peter Gasston @stopsatgreen broken-links.com

Slide 3

Slide 3 text

Creative Technologist rehabstudio.com (Yes, it's a real job)

Slide 4

Slide 4 text

1. Subject to change 2. There will be code. Before we start

Slide 5

Slide 5 text

Web Components

Slide 6

Slide 6 text

The Secret of Ultimate Power

Slide 7

Slide 7 text

{demo}

Slide 8

Slide 8 text

What. The. Flip?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Shadow DOM

Slide 12

Slide 12 text

Shadow DOM

Real DOM Shadow DOM Shadow Host

Slide 13

Slide 13 text

Rendered but invisible in the DOM.

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Make your own Shadow DOM

Slide 16

Slide 16 text

Shadow root var el = document.getElementById('foo'), newRoot = el.createShadowRoot(), newEl = document.createElement('h2); newEl.textContent = 'Shadow world!'; newRoot.appendChild(newEl);

Slide 17

Slide 17 text

Shadow world!

Shadow root

Hello world!

Slide 18

Slide 18 text

{demo}

Slide 19

Slide 19 text

Shadow DOM

Distributed Nodes

Slide 20

Slide 20 text

.getDistributedNodes() var newRoot = foo.createShadowRoot(), newEls = '

OK

', rootNodes = newRoot.querySelector('content') .getDistributedNodes(); console.log(rootNodes[1].textContent);

> GO

Slide 21

Slide 21 text

Ultimate Power!

Slide 22

Slide 22 text

The Shadow DOM API lets you see the man behind the curtain.

Slide 23

Slide 23 text

A problem Shadow DOM CSS HTML

Slide 24

Slide 24 text

The problem

.foo { color: #f00; }

.foo { color: #00f; } (^0_0^) (^_^;)

Slide 25

Slide 25 text

The Solution Encapsulation

Slide 26

Slide 26 text

Encapsulation 1. Everything the thing needs is contained within itself. 2. The thing doesn't interfere with things outside itself, and vice versa.

Slide 27

Slide 27 text

Encapsulation in HTML

Slide 28

Slide 28 text

Web Components Better encapsulation

Slide 29

Slide 29 text

What are Web Components ?

Slide 30

Slide 30 text

Web Components: a set of emerging standards aimed at making reusable widgets.

Slide 31

Slide 31 text

Web Components: the biggest change to web dev since XMLHttpRequest.

Slide 32

Slide 32 text

Shadow DOM Templates Custom elements Decorators

Slide 33

Slide 33 text

Shadow DOM Templates Custom elements Decorators

Slide 34

Slide 34 text

Mustache & Handlebars <h2>Hello world!</h2>

Slide 35

Slide 35 text

The template element

Hello world!

Content

Slide 36

Slide 36 text

This markup is inert.

Slide 37

Slide 37 text

The content object var foo = document.getElementById('foo'), bar = document.getElementById('bar'), clone = foo.content.cloneNode(true); bar.appendChild(clone);

Slide 38

Slide 38 text

Templates

State of the Browser

Hello world!

State of the Browser

Slide 39

Slide 39 text

This markup is active.

Slide 40

Slide 40 text

{demo}

Slide 41

Slide 41 text

Templates

Slide 42

Slide 42 text

Templates

Slide 43

Slide 43 text

The content element (insertion point)

Hello world!

Slide 44

Slide 44 text

The content element

Front End United

Hello world!

Slide 45

Slide 45 text

The select attribute

Hello world!

I'm foo

I'm bar

Slide 46

Slide 46 text

oldEl += document.createElement('content'); Shadow DOM

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Scoped styles

Slide 49

Slide 49 text

Scoped styles

h1 { color: #f00; }

I am red

I am not

Slide 50

Slide 50 text

{demo}

Slide 51

Slide 51 text

h1 { color: #f00; }

Hello world!

Scoped styles

Slide 52

Slide 52 text

css = 'h1 { color: red; }'; newRoot.appendChild(css); Shadow scope

Slide 53

Slide 53 text

The shadow boundary

Slide 54

Slide 54 text

.applyAuthorStyles newRoot = foo.createShadowRoot(); newRoot.applyAuthorStyles = true;

Slide 55

Slide 55 text

Pseudo-elements

Slide 56

Slide 56 text

Pseudo-elements

::-webkit-progress-bar

::-webkit-progress-value

Slide 57

Slide 57 text

{demo}

Slide 58

Slide 58 text

The pseudo attribute var newRoot = el.createShadowRoot(), newEl = document.createElement('h2'); newEl.pseudo = 'x-foo'; newEl.textContent = 'Shadow world!'; newRoot.appendChild(newEl);

Slide 59

Slide 59 text

The pseudo attribute

Shadow world!

#foo::x-foo { color: red; }

…

Slide 60

Slide 60 text

{demo}

Slide 61

Slide 61 text

Shadow DOM Templates Custom elements Decorators

Slide 62

Slide 62 text

The element element

...

Slide 63

Slide 63 text

Custom Elements

... Go

Slide 64

Slide 64 text

Rendered with the DOM & 'permanent'.

Slide 65

Slide 65 text

Shadow DOM Templates Custom elements Decorators

Slide 66

Slide 66 text

Hello world!

The decorator element

Slide 67

Slide 67 text

Decorators

Front End United

h1 { decorator: url(#foo); }

Front End United

Hello world!

Slide 68

Slide 68 text

Shadow DOM Templates Custom elements Decorators

Slide 69

Slide 69 text

Browser support

Slide 70

Slide 70 text

plus.google.com/+EricBidelman html5-demos.appspot.com/static/shadowdom-visualizer/index.html updates.html5rocks.com/tag/webcomponents broken-links.com Useful links x-tags.org

Slide 71

Slide 71 text

Ahem.