Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Shadow DOM 101
Search
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
63
Web APIs 2019
orlando
0
96
Managing remote teams
orlando
0
55
How to be a Senior Software Engineer
orlando
0
120
Terraform Workshop
orlando
1
140
Infrastructure as Code with Terraform
orlando
0
260
Concurrencia, Paralelismo y el Event-loop
orlando
0
310
Talking Web Apps
orlando
0
66
Web Launchpad - Chelajs
orlando
0
180
Other Decks in Programming
See All in Programming
GoのIteratorに詳しくなってしまう
inatonix
1
200
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
100
LangChainの現在とv0.3にむけて
os1ma
4
840
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
200
Rustではじめる負荷試験
skanehira
5
1.2k
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
250
Prolog入門
qnighy
4
990
今インフラ技術をイチから学び直すなら
yuhta28
1
130
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
960
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
280
2024 컴포즈 정원사
jisungbin
0
150
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
130
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Designing with Data
zakiwarfel
98
5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Automating Front-end Workflow
addyosmani
1365
200k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
BBQ
matthewcrist
83
9.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
35
6.8k
A designer walks into a library…
pauljervisheath
201
24k
GraphQLとの向き合い方2022年版
quramy
43
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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