Slide 1

Slide 1 text

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);

Slide 22

Slide 22 text

Styling Shadow DOM: CSS Scoping 1.   :host and :host() pseudo-class 2.   :host-context() pseudo-class 3.   ::content pseudo-element 4.   ::shadow pseudo-element 5.   >>> shadow-piercing descendant combinator CSS Scoping Module Level 1 • http://dev.w3.org/csswg/css-scoping/

Slide 23

Slide 23 text

:host :host { border-bottom: 1px solid #eee; min-height: 72px; }
...

Slide 24

Slide 24 text

:host() :host(.fancy) { border-bottom: 3px dashed LemonChiffon; } :host(:hover) { color: DarkSlateBlue; } ...

Slide 25

Slide 25 text

:host-context() :host-context(.fancypants) { background-color: LavenderBlush; }

Slide 26

Slide 26 text

::content ::content span { font-weight: 400; }
User:
...

Slide 27

Slide 27 text

::shadow x-chat-list::shadow > div { min-height: 100px; } #shadow-root
...
<-- this is selected * deprecated in Chrome recently: https://www.chromestatus.com/features/6750456638341120

Slide 28

Slide 28 text

>>> combinator Shadow-piercing descendant combinator x-chat-list >>> div { ... } #shadow-root
<-- all divs are selected incl. nested divs

Slide 29

Slide 29 text

>>> 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

Slide 30

Slide 30 text

https://flic.kr/p/8jP4NJ by Ryusuke b

Slide 31

Slide 31 text

Thank you <3 <3 <3 •  girliemac.com •  @girlie_mac •  github.com/girliemac