Styling the shadow DOM without dragons

Traditionally, CSS stylesheets have a terrible opinion about style encapsulation: the only thing stopping one element’s style from stomping over another’s is a “well chosen class name”.
The Shadow DOM fixes this by building a little castle and a moat around each element, so that styles can’t get in and out of the web component castle. But what happens if you _do_ want to style this custom element? How do you cross the moat? Custom properties, that’s how.

Video: https://www.youtube.com/watch?v=IbOaJwqLgog

Transcript

1. how to
   without
   STYLE ELEMENTS
   DRAGONS
   

   View Slide

2. @notwaldorf
   

   View Slide

3. I CSS
   

   View Slide

4. well, actually
   I COPYING CSS
   

   View Slide

5. 
   

   View Slide

6. 
   
   

   View Slide

7. 
   
   

   View Slide

8. 
   
   
   

   View Slide

9. 
   
   
   
   

   View Slide

10. 
    
    
    
    

    View Slide

11. 
    

    View Slide

12. spoilers
    CSS SCOPING BLOWS
    

    View Slide

13. thei
    SHADOW DOM
    

    View Slide

14. it’s aicastlei!
    SHADOW DOM
    

    View Slide

15. 
    

    View Slide

16. 
    
    <br/>. shiny {…}<br/>
    
    
    

    View Slide

17. 
    
    <br/>. .fancy {…}<br/>
    
    
    

    View Slide

18. 
    
    <br/>. a {…}<br/>
    
    
    

    View Slide

19. 
    
    
    
    

    View Slide

20. 
    
    

    View Slide

21. yay!
    
    
    

    View Slide

22. p.s.
    SUPER OLD NEWS
    

    View Slide

23. 
    

    View Slide

24. 
    

    View Slide

25. input {
    color: red;
    font-size: 30px;
    }
    
    

    View Slide

26. input {
    color: red;
    font-size: 30px;
    }
    
    

    View Slide

27. input #picker {
    less-ugly: yes;
    }
    
    

    View Slide

28. input #picker
    less-ugly
    }
    
    

    View Slide

29. omg how do i
    GET INSIDE THE CASTLE
    

    View Slide

30. with dragons!
    GET INSIDE THE CASTLE
    

    View Slide

31. DRAGONS
    mistakes wereimadei
    

    View Slide

32. ::SHADOW /DEEP/
    mistakes wereimadei
    

    View Slide

33. 
    

    View Slide

34. fancy-button /deep/
    fancy-div.fancy > .button {
    background: red;
    }
    
    

    View Slide

35. fancy-button /deep/
    fancy-div.fancy > .button {
    background: red;
    }
    
    
    

    View Slide

36. with dragons!
    GET INSIDE THE CASTLE
    

    View Slide

37. lol no
    GET INSIDE THE CASTLE
    

    View Slide

38. GET INSIDE THE CASTLE
    useiaibridgei
    

    View Slide

39. theiplatformyiway
    CSS PROPERTIES
    

    View Slide

40. 
    
    <br/>.<br/>
    
    
    

    View Slide

41. 
    
    <br/>.<br/>
    
    
    .button {
    background: red;
    }
    

    View Slide

42. 
    
    <br/>.<br/>
    
    
    .button {
    background: var(- -fancy-button-background);
    }
    

    View Slide

43. 
    
    <br/>.<br/>
    
    
    .button {
    background: var(- -fancy-button-background, red);
    }
    

    View Slide

44. 
    
    <br/>.<br/>
    
    
    fancy-div.fancy > .button {
    background: var(- -fancy-button-background, red);
    }
    

    View Slide

45. 
    

    View Slide

46. <br/><style><br/><fancy-button></fancy-button><br/>fancy-button {<br/>- -fancy-button-background: cornflowerblue;<br/>}<br/>

    View Slide

47. <br/><style><br/><fancy-button></fancy-button><br/>#submitButton {<br/>- -fancy-button-background: cornflowerblue;<br/>}<br/>

    View Slide

48. <br/><style><br/><fancy-button></fancy-button><br/>#submitButton {<br/>- -fancy-button-background: cornflowerblue;<br/>}<br/>

    View Slide

49. <br/><style><br/><fancy-button></fancy-button><br/>#submitButton {<br/>- -fancy-button-background: cornflowerblue;<br/>}<br/>

    View Slide

50. <br/>shiny-button {<br/>- -shiny-button-background: cornflowerblue;<br/>}<br/><style><br/><fancy-button></fancy-button><br/>

    View Slide

51. PROTIP: THEMES
    

    View Slide

52. <br/>:root {<br/>- -dark-primary-color: #303f9f;<br/>- -light-primary-color: #c5cae9;<br/>- -accent-color: #ff4081;<br/>- -disabled-text-color: #bdbdbd;<br/>- -divider-color: #e0e0e0;<br/>}<br/><style><br/>

    View Slide

53. <br/>some-element {<br/>color: var(- -dark-primary-color);<br/>}<br/>some-element [disabled] {<br/>color: var(- -disabled-text—color);<br/>}<br/><style><br/>

    View Slide

54. THERE’S A LOT OF CSS
    theithing is
    

    View Slide

55. 
    
    <br/>
    
    
    .button {
    background: var(- -fancy-button-background);
    }
    

    View Slide

56. 
    
    <br/>
    
    
    .button {
    background: var(- -fancy-button-background);
    padding: var(- -fancy-button-text-padding);
    }
    

    View Slide

57. 
    
    <br/>
    
    
    .button {
    background: var(- -fancy-button-background);
    padding: var(- -fancy-button-text-padding);
    opacity: var(- -fancy-button-opacity);
    }
    

    View Slide

58. 
    
    <br/>
    
    
    .button {
    background: var(- -fancy-button-background);
    @apply(- -fancy-button);
    }
    

    View Slide

59. <br/>#submitButton {<br/>- -fancy-button-background: cornflowerblue;<br/>}<br/><style><br/><fancy-button></fancy-button><br/>

    View Slide

60. <br/>#submitButton {<br/>- -fancy-button-background: cornflowerblue;<br/>}<br/><style><br/><fancy-button></fancy-button><br/>- -fancy-button: {<br/>padding: 30px;<br/>};<br/>

    View Slide

61. <br/>#submitButton {<br/>- -fancy-button-background: cornflowerblue;<br/>}<br/><style><br/><fancy-button></fancy-button><br/>- -fancy-button: {<br/>padding: 30px;<br/>};<br/>

    View Slide

62. <br/>#submitButton {<br/>- -fancy-button-background: cornflowerblue;<br/>}<br/><style><br/><fancy-button></fancy-button><br/>- -fancy-button: {<br/>padding: 30px;<br/>}<br/>

    View Slide

63. <br/>#submitButton {<br/>- -fancy-button-background: cornflowerblue;<br/>}<br/><style><br/><fancy-button></fancy-button><br/>- -fancy-button: {<br/>padding: 30px;<br/>};<br/>

    View Slide

64. BRIDGES
    DRAGONS
    not
    you want
    

    View Slide

65. @notwaldorf
    

    View Slide