Slide 1

Slide 1 text

Introducing Web Components #FELOneDay 09/13

Slide 2

Slide 2 text

Peter Gasston @stopsatgreen broken-links.com

Slide 3

Slide 3 text

Creative Technologist / Front-end lead rehabstudio.com

Slide 4

Slide 4 text

1. Subject to change 2. There will be code

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 FrontEndLondon?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Shadow DOM

Slide 11

Slide 11 text

Rendered but invisible in the DOM.

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Make your own Shadow DOM

Slide 14

Slide 14 text

Shadow Root DOM Host Cat Wars

Slide 15

Slide 15 text

Shadow root var newRoot = $(foo).createShadowRoot(), newEl = '

Shadow world!

'; newRoot.innerHTML = newEl;

Slide 16

Slide 16 text

Hello world!

Shadow root

Slide 17

Slide 17 text

Hello world!

Shadow world!

Shadow root

Slide 18

Slide 18 text

{demo}

Slide 19

Slide 19 text

Shadow DOM

Real DOM Shadow DOM Shadow Host

Slide 20

Slide 20 text

A DOM hidden inside the DOM.

Slide 21

Slide 21 text

Ultimate Power!

Slide 22

Slide 22 text

A problem Shadow DOM

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

.foo { color: #00f; } The problem
div.foo { color: #f00; }

Slide 25

Slide 25 text

The Solution Encapsulation

Slide 26

Slide 26 text

Encapsulation 1. It has all it needs. 2. Nothing gets in, nothing gets out.

Slide 27

Slide 27 text

Encapsulation 1. We run things, things don’t run we. 2. Don’t take nothing from nobody.

Slide 28

Slide 28 text

● Extra network requests ● Multiple rendering contexts ● CORS conflicts ● Generally a bit shit Encapsulation

Slide 29

Slide 29 text

Web Components Better encapsulation

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Shadow DOM Templates Custom elements

Slide 33

Slide 33 text

Shadow DOM Templates Custom elements

Slide 34

Slide 34 text

Shadow DOM Templates Custom elements

Slide 35

Slide 35 text

Mustache, etc. <h2>Hello world!</h2>

Slide 36

Slide 36 text

The template element

Hello world!

Slide 37

Slide 37 text

The markup is inert.

Slide 38

Slide 38 text

The template element

Slide 39

Slide 39 text

The template element

Hello world!

Content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Templates

#FELOneDay

Slide 42

Slide 42 text

Templates

#FELOneDay

Hello world!

Slide 43

Slide 43 text

The markup is active.

Slide 44

Slide 44 text

Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), clone = $(bar).content.cloneNode(true), newRoot.innerHTML = clone;

Slide 45

Slide 45 text

The content element

Hello world!

Slide 46

Slide 46 text

Good afternoon, London!

The content element

Hello world!

Slide 47

Slide 47 text

Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), el = document.createElement('content'); newRoot.innerHTML = el;

Slide 48

Slide 48 text

Templates

Slide 49

Slide 49 text

HTML Imports

Slide 50

Slide 50 text

HTML Imports var lnk = 'link[rel="import"]', impt = document.querySelector(lnk), tpl = lnk.import.getElementById('foo'), clone = tpl.content.cloneNode(true);

Slide 51

Slide 51 text

HTML Imports

Slide 52

Slide 52 text

Shadow DOM Templates Custom elements

Slide 53

Slide 53 text

Custom elements

Slide 54

Slide 54 text

Custom elements document.register('front-end');

Slide 55

Slide 55 text

Custom elements + shadow DOM + templates

Slide 56

Slide 56 text

Custom elements document.register('front-end', { extends: 'button' }); Go

Slide 57

Slide 57 text

Custom element API var fe = Object.create( HTMLElement.prototype ); fe.foo = function() { // Something }; document.register('front-end', { prototype: fe });

Slide 58

Slide 58 text

The element element … #document-fragment

Slide 59

Slide 59 text

Fully encapsulated & reusable

Slide 60

Slide 60 text

Encapsulation Reusability Portability Shadow DOM Templates Custom elements

Slide 61

Slide 61 text

That’s basically it.

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Appendix A: More about Encapsulation

Slide 64

Slide 64 text

The shadow boundary

Slide 65

Slide 65 text

The shadow boundary CSS & JS

Slide 66

Slide 66 text

The shadow boundary CSS & JS

Slide 67

Slide 67 text

Shadow root var shad = newRoot.shadowRoot; shad.querySelector('h2');

Slide 68

Slide 68 text

The shadow boundary CSS

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

The shadow boundary CSS

Slide 71

Slide 71 text

Pseudo-elements

Slide 72

Slide 72 text

Pseudo-elements
::-webkit-progress-bar
::-webkit-progress-value

Slide 73

Slide 73 text

{demo}

Slide 74

Slide 74 text

The part attribute var newRoot = el.createShadowRoot(), newEl = '

'; newRoot.appendChild(newEl);

Slide 75

Slide 75 text

Show me your parts
#document-fragment

Shadow world!

.foo::part(apes) { color: red; }

Slide 76

Slide 76 text

Appendix B: Scope

Slide 77

Slide 77 text

Hello

p { color: #f00; }

World!

Again

Scoped styles

Slide 78

Slide 78 text

Hello

p { color: #f00; }

World!

Again

Scoped styles

Slide 79

Slide 79 text

css = 'p { color: #f00; }'; newRoot.appendChild(css); Shadow scope

Slide 80

Slide 80 text

Custom properties

Slide 81

Slide 81 text

(don’t call them variables)

Slide 82

Slide 82 text

body { var-highlight: #f00; } Custom properties h1 { color: var(highlight); }

Slide 83

Slide 83 text

Custom properties .foo { var-highlight: #00f; } body { var-highlight: #f00; }

Slide 84

Slide 84 text

Custom properties
#document-fragment h1 { color: var(highlight); }
body { var-highlight: #f00; }

Slide 85

Slide 85 text

Almost done

Slide 86

Slide 86 text

Shadow DOM Shadow DOM API Templates HTML imports Custom elements Scoped styles Custom properties Browser support

Slide 87

Slide 87 text

87 Polymer project Polymer project

Slide 88

Slide 88 text

Useful links polymer-project.org updates.html5rocks.com/tag/webcomponents plus.google.com/+EricBidelman mozilla.github.io/brick customelements.io

Slide 89

Slide 89 text

Peter Gasston @stopsatgreen broken-links.com