Slide 1

Slide 1 text

Introducing Web Components #Smartweb 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 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 Frigarui?

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 Etc

Slide 15

Slide 15 text

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

Shadow world!

'; newRoot.innerHTML = newEl;

Slide 16

Slide 16 text

Shadow root

Hello world!

Slide 17

Slide 17 text

Shadow root

Hello world!

Shadow world!

Slide 18

Slide 18 text

{demo}

Slide 19

Slide 19 text

Shadow DOM

Real DOM Shadow DOM Shadow Host

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

A DOM hidden inside the DOM.

Slide 22

Slide 22 text

Ultimate Power!

Slide 23

Slide 23 text

A problem Shadow DOM

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

The Solution Encapsulation

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Encapsulation in HTML ● Extra network requests ● Multiple rendering contexts ● CORS conflicts

Slide 29

Slide 29 text

Web Components Better encapsulation

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

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 & Handlebars <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

SmartWeb

Slide 42

Slide 42 text

Templates

SmartWeb

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 morning, Bucharest!

The content element

Slide 47

Slide 47 text

Hello world!

Good morning, Bucharest!

The content element

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Templates

Slide 50

Slide 50 text

HTML Imports

Slide 51

Slide 51 text

Templates

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('smart-web');

Slide 55

Slide 55 text

Custom elements + shadow DOM + templates

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

The element element … #document-fragment

Slide 58

Slide 58 text

Fully encapsulated & reusable

Slide 59

Slide 59 text

Encapsulation Reusability Portability Shadow DOM Templates Custom elements

Slide 60

Slide 60 text

That’s it.

Slide 61

Slide 61 text

Styling the Shadow DOM

Slide 62

Slide 62 text

The shadow boundary

Slide 63

Slide 63 text

The shadow boundary CSS

Slide 64

Slide 64 text

The shadow boundary CSS

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

The shadow boundary CSS

Slide 67

Slide 67 text

The shadow boundary CSS

Slide 68

Slide 68 text

Pseudo-elements

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

{demo}

Slide 71

Slide 71 text

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

'; newRoot.appendChild(newEl);

Slide 72

Slide 72 text

The part attribute
#document-fragment

Shadow world!

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

Slide 73

Slide 73 text

Scope

Slide 74

Slide 74 text

Hello

p { color: #f00; }

World!

Again

Scoped styles

Slide 75

Slide 75 text

Hello

p { color: #f00; }

World!

Again

Scoped styles

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Custom properties (variables)

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

The Future?

Slide 82

Slide 82 text

Decorators

Slide 83

Slide 83 text

The decorator element

Hello world!

Slide 84

Slide 84 text

Decorators

Front End United

h1 { decorator: url(#foo); }

Hello world!

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

86 Polymer project Polymer project

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

Multumesc ’