Tweet
Tweet

Slide 1

Slide 1 text

SHADOW DOM 101 Friday, July 12, 13

Slide 2

Slide 2 text

@odelaguila Friday, July 12, 13

Slide 3

Slide 3 text

Friday, July 12, 13

Slide 4

Slide 4 text

Wat? Friday, July 12, 13

Slide 5

Slide 5 text

Web Components Friday, July 12, 13

Slide 6

Slide 6 text

webcomponentsshift.com Friday, July 12, 13

Slide 7

Slide 7 text

Friday, July 12, 13

Slide 8

Slide 8 text

Friday, July 12, 13

Slide 9

Slide 9 text

can i has? Friday, July 12, 13

Slide 10

Slide 10 text

Friday, July 12, 13

Slide 11

Slide 11 text

polymer-project.org Friday, July 12, 13

Slide 12

Slide 12 text

Ejemplo Friday, July 12, 13

Slide 13

Slide 13 text

Chrome date input Friday, July 12, 13

Slide 14

Slide 14 text

1 Friday, July 12, 13

Slide 15

Slide 15 text

Friday, July 12, 13

Slide 16

Slide 16 text

1 Friday, July 12, 13

Slide 17

Slide 17 text

1 2 #document-fragment 3
4
5 8
9 / 10
11 14
15 / 16
17 20
21
22
23
24
25 Friday, July 12, 13

Slide 18

Slide 18 text

1 document.getElementById("test").childNodes 2 => [] Friday, July 12, 13

Slide 19

Slide 19 text

¿Como? Friday, July 12, 13

Slide 20

Slide 20 text

1
2

My Title

3

My Subtitle

4
...other content...
5
1 2 var dom = document.querySelector('#dom'); 3 var shadow = dom.webkitCreateShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 1
2 #document-fragment 3

Yay, ShadowDOM!

4
html js rendered html Friday, July 12, 13

Slide 21

Slide 21 text

Styling Shadow DOM Friday, July 12, 13

Slide 22

Slide 22 text

1
2

My Title

3

My Subtitle

4
...other content...
5
5 6 html,body { 7 border: 0; 8 margin: 0; 9 padding: 0; 10 height: 100%; 11 width: 100%; 12 } 13 #dom { 14 background: lightblue; 15 color: black; 16 } 17 18 h2 { 19 font-size: 50px; 20 color : purple; 21 } 22 html css Friday, July 12, 13

Slide 23

Slide 23 text

Friday, July 12, 13

Slide 24

Slide 24 text

1
2

My Title

3

My Subtitle

4
...other content...
5
1 2 var dom = document.querySelector('#dom'); 3 var shadow = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 7 5 6 html,body { 7 border: 0; 8 margin: 0; 9 padding: 0; 10 height: 100%; 11 width: 100%; 12 } 13 #dom { 14 background: lightblue; 15 color: black; 16 } 17 18 h2 { 19 font-size: 50px; 20 color : purple; 21 } 22 html js css Friday, July 12, 13

Slide 25

Slide 25 text

Friday, July 12, 13

Slide 26

Slide 26 text

estilos propios y herencia Friday, July 12, 13

Slide 27

Slide 27 text

estilos propios Friday, July 12, 13

Slide 28

Slide 28 text

1 2 var dom = document.querySelector('#dom'); 3 var shadow = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.applyAuthorStyles = false; // default 6 Friday, July 12, 13

Slide 29

Slide 29 text

1 2 var dom = document.querySelector('#dom'); 3 var shadow = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.applyAuthorStyles = true; 6 Friday, July 12, 13

Slide 30

Slide 30 text

Friday, July 12, 13

Slide 31

Slide 31 text

herencia Friday, July 12, 13

Slide 32

Slide 32 text

1 2 var dom = document.querySelector('#dom'); 3 var shadow = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.resetStyleInheritance = false; // default 6 Friday, July 12, 13

Slide 33

Slide 33 text

1 2 var dom = document.querySelector('#dom'); 3 var shadow = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.resetStyleInheritance = true; 6 Friday, July 12, 13

Slide 34

Slide 34 text

@host css rule Friday, July 12, 13

Slide 35

Slide 35 text

5 6 @host { 7 div { 8 background: red; 9 } 10 } 11 css Friday, July 12, 13

Slide 36

Slide 36 text

Friday, July 12, 13

Slide 37

Slide 37 text

wrapup Friday, July 12, 13

Slide 38

Slide 38 text

js encapsulado Friday, July 12, 13

Slide 39

Slide 39 text

markup encapsulado Friday, July 12, 13

Slide 40

Slide 40 text

css encapsulado Friday, July 12, 13

Slide 41

Slide 41 text

css encapsulado Friday, July 12, 13

Slide 42

Slide 42 text

Recursos Friday, July 12, 13

Slide 43

Slide 43 text

* polymer-project.org * webcomponentsshift.com * html5rocks.com Friday, July 12, 13

Slide 44

Slide 44 text

Gracias :) Friday, July 12, 13