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
67
Web APIs 2019
orlando
0
110
Managing remote teams
orlando
0
58
How to be a Senior Software Engineer
orlando
0
120
Terraform Workshop
orlando
1
140
Infrastructure as Code with Terraform
orlando
0
270
Concurrencia, Paralelismo y el Event-loop
orlando
0
330
Talking Web Apps
orlando
0
79
Web Launchpad - Chelajs
orlando
0
190
Other Decks in Programming
See All in Programming
チームの立て直し施策をGoogleの 『効果的なチーム』と見比べてみた
maroon8021
0
270
Amazon Bedrock Multi Agentsを試してきた
tm2
1
230
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.7k
WebDriver BiDiとは何なのか
yotahada3
1
100
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
500
Linux && Docker 研修/Linux && Docker training
forrep
22
4.1k
Scaling your build logic
antalmonori
1
150
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
990
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
4.8k
Azure AI Foundryのご紹介
qt_luigi
1
260
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
980
時計仕掛けのCompose
mkeeda
1
200
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
GitHub's CSS Performance
jonrohan
1030
460k
Facilitating Awesome Meetings
lara
51
6.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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