Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Shadow DOM 101
Orlando Del Aguila
July 11, 2013
Programming
1
2.1k
Shadow DOM 101
lighting talk para el grupo de ruby-gdl en la reunion de julio 2013
Orlando Del Aguila
July 11, 2013
Tweet
Share
More Decks by Orlando Del Aguila
See All by Orlando Del Aguila
Open Source + Nonprofits = 💪
orlando
0
39
Web APIs 2019
orlando
0
57
Managing remote teams
orlando
0
36
How to be a Senior Software Engineer
orlando
0
71
Terraform Workshop
orlando
1
97
Infrastructure as Code with Terraform
orlando
0
210
Concurrencia, Paralelismo y el Event-loop
orlando
0
220
Talking Web Apps
orlando
0
31
Web Launchpad - Chelajs
orlando
0
130
Other Decks in Programming
See All in Programming
Keep Your Cache Always Fresh With Debezium
gunnarmorling
0
170
Jetpack DataStore
djain2405
1
170
Modern Web Apps with Spring Boot, Angular & TypeScript
toedter
12
14k
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
hpgrahsl
0
300
クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website
clockmaker
1
910
코드 품질 1% 올리기
pluu
0
740
SRE NEXT 2022: Sensible Incident Management for Software Startups
takanabe
1
190
Untangling Coroutine Testing (Android Makers 2022)
zsmb
0
380
人類には難しいZynqで組み込みRust
ikemori
0
460
PublishでWebサイトを構築してみた / generate_website_with_publish
uhooi
2
110
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
manfredsteyer
PRO
0
370
Cloud Bigtable を使いこなす秘訣 2022
kusahana
0
220
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
85
3.9k
We Have a Design System, Now What?
morganepeng
35
2.9k
Docker and Python
trallard
27
1.5k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
What the flash - Photography Introduction
edds
61
9.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Creatively Recalculating Your Daily Design Routine
revolveconf
205
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Rails Girls Zürich Keynote
gr2m
86
12k
Transcript
SHADOW DOM 101 Friday, July 12, 13
@odelaguila Friday, July 12, 13
Friday, July 12, 13
Wat? Friday, July 12, 13
Web Components Friday, July 12, 13
webcomponentsshift.com Friday, July 12, 13
Friday, July 12, 13
Friday, July 12, 13
can i has? Friday, July 12, 13
Friday, July 12, 13
polymer-project.org Friday, July 12, 13
Ejemplo Friday, July 12, 13
Chrome date input Friday, July 12, 13
1 <input name="date" id="test" type="date"> Friday, July 12, 13
Friday, July 12, 13
1 <input name="date" id="test" type="date"> Friday, July 12, 13
1 <input name="date" id="test" type="date"> 2 #document-fragment 3 <div pseudo="-webkit-datetime-edit">
4 <div pseudo="-webkit-datetime-edit-fields-wrapper"> 5 <span role="spinbutton" aria-valuetext="blank" aria-help="Month" aria-valuemin="1"... 6 mm 7 </span> 8 <div pseudo="-webkit-datetime-edit-text"> 9 / 10 </div> 11 <span role="spinbutton" aria-valuetext="blank" aria-help="Day" aria-valuemin="1"... 12 dd 13 </span> 14 <div pseudo="-webkit-datetime-edit-text"> 15 / 16 </div> 17 <span role="spinbutton" aria-valuetext="blank" aria-help="Year" aria-valuemin="1"... 18 yyyy 19 </span> 20 </div> 21 </div> 22 <div pseudo="-webkit-clear-button" style="visibility: hidden;"></div> 23 <div></div> 24 <div pseudo="-webkit-calendar-picker-indicator"></div> 25 </input> Friday, July 12, 13
1 document.getElementById("test").childNodes 2 => [] Friday, July 12, 13
¿Como? Friday, July 12, 13
1 <div id="dom"> 2 <h1>My Title</h1> 3 <h2>My Subtitle</h2> 4
<div> ...other content...</div> 5 </div> 1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow = dom.webkitCreateShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 </script> 1 <div id="dom"> 2 #document-fragment 3 <h2>Yay, ShadowDOM!</h2> 4 </div> html js rendered html Friday, July 12, 13
Styling Shadow DOM Friday, July 12, 13
1 <div id="dom"> 2 <h1>My Title</h1> 3 <h2>My Subtitle</h2> 4
<div> ...other content...</div> 5 </div> 5 <style> 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 </style> html css Friday, July 12, 13
Friday, July 12, 13
1 <div id="dom"> 2 <h1>My Title</h1> 3 <h2>My Subtitle</h2> 4
<div> ...other content...</div> 5 </div> 1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 7 </script> 5 <style> 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 </style> html js css Friday, July 12, 13
Friday, July 12, 13
estilos propios y herencia Friday, July 12, 13
estilos propios Friday, July 12, 13
1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow
= dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.applyAuthorStyles = false; // default 6 </script> Friday, July 12, 13
1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow
= dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.applyAuthorStyles = true; 6 </script> Friday, July 12, 13
Friday, July 12, 13
herencia Friday, July 12, 13
1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow
= dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.resetStyleInheritance = false; // default 6 </script> Friday, July 12, 13
1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow
= dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.resetStyleInheritance = true; 6 </script> Friday, July 12, 13
@host css rule Friday, July 12, 13
5 <style> 6 @host { 7 div { 8 background:
red; 9 } 10 } 11 </style> css Friday, July 12, 13
Friday, July 12, 13
wrapup Friday, July 12, 13
js encapsulado Friday, July 12, 13
markup encapsulado Friday, July 12, 13
css encapsulado Friday, July 12, 13
css encapsulado Friday, July 12, 13
Recursos Friday, July 12, 13
* polymer-project.org * webcomponentsshift.com * html5rocks.com Friday, July 12, 13
Gracias :) Friday, July 12, 13