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
82
Web APIs 2019
orlando
0
130
Managing remote teams
orlando
0
68
How to be a Senior Software Engineer
orlando
0
150
Terraform Workshop
orlando
1
160
Infrastructure as Code with Terraform
orlando
0
280
Concurrencia, Paralelismo y el Event-loop
orlando
0
350
Talking Web Apps
orlando
0
96
Web Launchpad - Chelajs
orlando
0
210
Other Decks in Programming
See All in Programming
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
120
20250708_JAWS_opscdk
takuyay0ne
2
150
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
590
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
AI Ramen Fight
yusukebe
0
110
iOS開発スターターキットの作り方
akidon0000
0
180
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
260
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
640
AIのメモリー
watany
11
940
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
1
360
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Docker and Python
trallard
45
3.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Automating Front-end Workflow
addyosmani
1370
200k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Speed Design
sergeychernyshev
32
1k
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