Shedding Light on the Shadow Dom

We have many problems that exist in modern CSS architecture including a lack of encapsulation, no facility to accurately remove dead code and of course, specificity conflicts.

I will explain how the Shadow Dom specification can help to solve them by crafting reusable components using various pseudo selectors and slots. I'll also show you how to create an API for your components that consumers can access using CSS Custom Properties.

Transcript

1. Shedding light on the
   Shadow DOM
   @DaveOrDead
   

   View Slide

2. @DaveOrDead
   

   View Slide

3. @DaveOrDead
   Disclaimers...
   

   View Slide

4. @DaveOrDead
   Who’s walking in the light
   now?
   

   View Slide

5. @DaveOrDead
   Why Shadow Dom?
   

   View Slide

6. View Slide

7. 
   New Message in #customer-support
   Have you guys thought about using Web Components yet?
   Reply
   
   

   View Slide

8. View Slide

9. var notification = document.getElementById('notification');
   var root = notification.createShadowRoot(); // attachShadow()
   root.innerHTML = 'HOLD THE DOOR!';
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. root.innerHTML = `
    
    
    ...
    Close
    
    
    1 minute ago
    `;
    

    View Slide

14. View Slide

15. \
    

    View Slide

16. Slots
    

    View Slide

17. root.innerHTML = `
    
    
    ...
    Close
    
    
    1 minute ago
    `;
    

    View Slide

18. 
    New Message in #customer-support
    Reply
    Have you guys thought about using Web Components yet?
    
    

    View Slide

19. root.innerHTML = `
    
    
    ...
    Close
    
    
    
    
    1 minute ago
    `;
    

    View Slide

20. \
    

    View Slide

21. root.innerHTML = `
    …
    <br/>:host {<br/>background-color: #3498db;<br/>border-radius: 5px;<br/>line-height: 1.4;<br/>width: 25rem;<br/>}<br/><style>`;<br/>

    View Slide

22. View Slide

23. :host(.is-active) {
    border: 10px solid pink;
    }
    

    View Slide

24. View Slide

25. :host-context(.house-tyrell-theme) {
    background-color: green;
    }
    

    View Slide

26. View Slide

27. Shadow Root
    

    View Slide

28. root.innerHTML = '<br/>...<br/>button {\<br/>/* Styles */<br/>}\<br/>p {\<br/>/* Styles */<br/>}\<br/>...<br/>';
    

    View Slide

29. 
    
    
    
    
    

    View Slide

30. View Slide

31. Styles are scoped to
    the Shadow Root!
    

    View Slide

32. Styling the ::content
    

    View Slide

33. root.innerHTML = `<br/>...<br/>::content h3,<br/>::content p {<br/>color: #fff;<br/>margin-top: 0;<br/>padding-top: 0;<br/>}<br/>...<br/>`;
    

    View Slide

34. Styling the ::content // ::slotted
    

    View Slide

35. root.innerHTML = `<br/>...<br/>::slotted h3,<br/>::slotted p {<br/>color: #fff;<br/>margin-top: 0;<br/>padding-top: 0;<br/>}\<br/>...<br/>`;
    

    View Slide

36. View Slide

37. #notification::shadow p
    #notification / deep / p
    #notification >>> p
    

    View Slide

38. #notification::shadow p
    #notification / deep / p
    #notification >>> p
    DEPRECATED
    

    View Slide

39. Custom Properties
    (aka CSS variables)
    

    View Slide

40. root.innerHTML = `<br/>...<br/>button svg {<br/>fill: var(--notification-close-button-color, #fff);<br/>height: var(--notification-close-button-size, 1.5rem);<br/>width: var(--notification-button-size, 1.5rem);<br/>}<br/>p {<br/>color: var(--notification-text-color, #fff);<br/>text-align: right;<br/>}<br/>...<br/>`;
    

    View Slide

41. :root {
    --notification-close-button-color: orange;
    --notification-close-button-size: 2rem;
    --notification-text-color: yellow;
    }
    

    View Slide

42. View Slide

43. Can I use it?
    Chrome - Yes
    Opera - Yes
    Firefox - Feature Flag
    Safari - In Progress
    Edge - Vote for it
    

    View Slide

44. Polyfills
    Webcomponents.js
    Polymer
    X-Tag
    

    View Slide

45. Useful Links
    https://webkit.org/blog/4096/introducing-shadow-dom-api/
    https://hacks.mozilla.org/2015/06/the-state-of-web-components/
    https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.
    md
    https://drafts.csswg.org/css-scoping/#intro
    @DaveOrDead
    

    View Slide

46. Thanks!
    @DaveOrDead
    

    View Slide