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
55
Web APIs 2019
orlando
0
85
Managing remote teams
orlando
0
52
How to be a Senior Software Engineer
orlando
0
100
Terraform Workshop
orlando
1
120
Infrastructure as Code with Terraform
orlando
0
260
Concurrencia, Paralelismo y el Event-loop
orlando
0
290
Talking Web Apps
orlando
0
55
Web Launchpad - Chelajs
orlando
0
170
Other Decks in Programming
See All in Programming
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
520
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
910
敵対的ポイフル
futabato
0
140
Goのエラースタックトレースの歴史と今後
sonatard
10
1.8k
Tailwind CSSを本気でカスタマイズする方法
fsubal
15
5.5k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
670
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.8k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
540
Going beyond Apache Parquet's default settings
xhochy
0
130
Featured
See All Featured
Designing for humans not robots
tammielis
247
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Building Adaptive Systems
keathley
32
1.9k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
The Invisible Customer
myddelton
114
12k
BBQ
matthewcrist
80
8.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
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