Dominating
Shadow DOM
Tomomi Imura (@girlie_mac)
CC0
Slide 2
Slide 2 text
Creating Web UI
Slide 3
Slide 3 text
Bleh!
Slide 4
Slide 4 text
Modular UI
Slide 5
Slide 5 text
Chat Room
Slide 6
Slide 6 text
W3C Web Components
• HTML Imports
• HTML Templates
• Custom Elements
• Shadow DOM
Slide 7
Slide 7 text
Shadow DOM
Shadow DOM enable markup to:
• be composed in modular pattern
• be encapsulated (Private)
• overlay subtree of nodes
Slide 8
Slide 8 text
Shadow DOM Browser Supports
with vendor prefix
25* 15* 4.4*
no vendor prefix
35 22
Can I Use?
Slide 9
Slide 9 text
Shadow DOM in Browser
0:05
SoundBible.com b
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Custom Elements
Slide 16
Slide 16 text
Kitteh Anonymous (Polymer demo)
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Dissecting Custom Elements
• Element → Shadow Host
• The root of shadow DOM subtree → Shadow Root
• Shadow DOM subtrees → Shadow DOM
• Children
• Children visible to end user → Light DOM
Slide 19
Slide 19 text
DOM & Shadow DOM
Slide 20
Slide 20 text
DOM: Creating a Node
var parent = document.querySelector('#parent');
var child = document.createElement('div');
parent.appendChild(child);
Slide 21
Slide 21 text
Shadow DOM: Creating a Node
var host = document.querySelector('#host');
var shadowroot = host.createShadowRoot();
// To append a child node to the shadow root
var child = document.createElement('div');
shadowroot.appendChild(child);
>>> combinator
audio.fancy >>> input[type=range] {
background-color: CornflowerBlue;
}
Actual DOM:
Screenshot:
0:05
* Both /deep/ and the combinator are deprecated in Chrome: https://www.chromestatus.com/features/6750456638341120