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

Styling the shadow DOM without dragons

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

Monica Dinculescu

September 15, 2015
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

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