Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dominating Shadow DOM (@AngularU Conf San Franc...

Dominating Shadow DOM (@AngularU Conf San Francisco)

Divs, nested divs and more nested divs… A pretty web UI with nasty markups is a big turn-off, and it's hard to maintain. Now with a new set of new W3C web platform primitives called Web Components, we can encapsulate UI and complex functionalities, just like packing data and functions into a single component, and restrict the access in object-oriented programming. The web components don’t add ugly children in your DOM tree, in fact, they are separated from the tree. The DOM-related methods like getElementById() doesn’t give you an access inside! So, how can you use the encapsulated components and also obtain the access inside and style them?

Tomomi Imura

June 22, 2015
Tweet

More Decks by Tomomi Imura

Other Decks in Technology

Transcript

  1. <core-scaffold> <core-header-panel> <core-toolbar>Chat Room</core-toolbar> </core-header-panel> <template repeat="{{m in messages}}"> <x-chat-list

    uuid="{{m.uuid}}" text="{{m.text}}"></x-chat-list </template> <paper-input on-keyup="{{checkKey}}"></paper-input> <paper-fab icon="send"></paper-fab> </core-scaffold>
  2. Shadow DOM Shadow DOM enable markup to: •  be composed

    in modular pattern •  be encapsulated (Private) •  overlay subtree of nodes
  3. 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
  4. DOM: Creating a Node <div id="parent"></div> var parent = document.querySelector('#parent');

    var child = document.createElement('div'); parent.appendChild(child);
  5. Shadow DOM: Creating a Node <div id="host"></div> 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);
  6. 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/
  7. :host <element name="x-chat-list"> <style> :host { border-bottom: 1px solid #eee;

    min-height: 72px; } </style> <div class="username"></div> <div class="text"></div> <template>...</template> </element>
  8. :host() <element name="x-chat-list" class="fancy"> <style> :host(.fancy) { border-bottom: 3px dashed

    LemonChiffon; } :host(:hover) { color: DarkSlateBlue; } </style> ... </element>
  9. ::content <element name="x-chat-list"> <style> ::content span { font-weight: 400; }

    </style> <div class="username"><span>User: </span></div> <div class="text"></div> <template>...</template> </element>
  10. ::shadow x-chat-list::shadow > div { min-height: 100px; } <x-chat-list> #shadow-root

    <div>...</div> <-- this is selected </x-chat-list> * deprecated in Chrome recently: https://www.chromestatus.com/features/6750456638341120
  11. >>> combinator Shadow-piercing descendant combinator x-chat-list >>> div { ...

    } <x-chat-list> #shadow-root <div> <-- all divs are selected incl. nested divs <div> <div></div> </div> </div> </x-chat-list>
  12. >>> 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