Slide 1

Slide 1 text

Future CSS in Web Components #CSSConf, 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 Fridge? (me not being a jerk)

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 Host DOM Root 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

Shadow DOM

Real DOM Shadow DOM Shadow Host

Slide 19

Slide 19 text

Ultimate Power!

Slide 20

Slide 20 text

A problem Shadow DOM CSS HTML

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

The Solution Encapsulation

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Web Components Better encapsulation

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Shadow DOM Templates Custom elements

Slide 29

Slide 29 text

Shadow DOM Templates Custom elements

Slide 30

Slide 30 text

Shadow DOM Templates Custom elements

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

The template element

Hello world!

Slide 33

Slide 33 text

The markup is inert.

Slide 34

Slide 34 text

The template element

Slide 35

Slide 35 text

The template element

Hello world!

Content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Templates

CSSConf.eu

Slide 38

Slide 38 text

Templates

CSSConf.eu

Hello world!

Slide 39

Slide 39 text

The markup is active.

Slide 40

Slide 40 text

Templates

Slide 41

Slide 41 text

Templates

Slide 42

Slide 42 text

Templates

Slide 43

Slide 43 text

Shadow DOM Templates Custom elements

Slide 44

Slide 44 text

Custom Elements

Slide 45

Slide 45 text

Custom Elements var wbar = document.register('wunder-bar');

Slide 46

Slide 46 text

Custom Elements … + shadow DOM + templates

Slide 47

Slide 47 text

Fully encapsulated & reusable

Slide 48

Slide 48 text

CSS (at last)

Slide 49

Slide 49 text

Hello Scope

Slide 50

Slide 50 text

Hello

p { color: #f00; }

World!

Again

Scoped styles

Slide 51

Slide 51 text

Hello

p { color: #f00; }

World!

Again

Scoped styles

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

The shadow boundary

Slide 54

Slide 54 text

The shadow boundary CSS

Slide 55

Slide 55 text

The shadow boundary CSS

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

The shadow boundary CSS

Slide 58

Slide 58 text

The shadow boundary CSS

Slide 59

Slide 59 text

Pseudo-elements

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

'; newRoot.appendChild(newEl);

Slide 62

Slide 62 text

The part attribute
#document-fragment

Shadow world!

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

Slide 63

Slide 63 text

Custom Properties (variables)

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

The Future?

Slide 68

Slide 68 text

Decorators

Slide 69

Slide 69 text

Hello world!

The decorator element

Slide 70

Slide 70 text

Decorators

CSSConf.eu

h1 { decorator: url(#foo); }

Slide 71

Slide 71 text

Decorators h1 { decorator: url(#foo); }

CSSconf.eu

Hello world!

Slide 72

Slide 72 text

Browser support

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

1. Web components provide reusability and encapsulation 2. Scope is coming to CSS In conclusion