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 full-size slide

  2. well, actually
    I COPYING CSS

    View full-size slide

  3. spoilers
    CSS SCOPING BLOWS

    View full-size slide

  4. thei
    SHADOW DOM

    View full-size slide

  5. it’s aicastlei!
    SHADOW DOM

    View full-size slide



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


    View full-size slide



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


    View full-size slide



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


    View full-size slide

  9. p.s.
    SUPER OLD NEWS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. input #picker
    less-ugly
    }

    View full-size slide

  14. omg how do i
    GET INSIDE THE CASTLE

    View full-size slide

  15. with dragons!
    GET INSIDE THE CASTLE

    View full-size slide

  16. DRAGONS
    mistakes wereimadei

    View full-size slide

  17. ::SHADOW /DEEP/
    mistakes wereimadei

    View full-size slide

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

    View full-size slide

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


    View full-size slide

  20. with dragons!
    GET INSIDE THE CASTLE

    View full-size slide

  21. lol no
    GET INSIDE THE CASTLE

    View full-size slide

  22. GET INSIDE THE CASTLE
    useiaibridgei

    View full-size slide

  23. theiplatformyiway
    CSS PROPERTIES

    View full-size slide



  24. <br/>.<br/>


    .button {
    background: red;
    }

    View full-size slide



  25. <br/>.<br/>


    .button {
    background: var(- -fancy-button-background);
    }

    View full-size slide



  26. <br/>.<br/>


    .button {
    background: var(- -fancy-button-background, red);
    }

    View full-size slide



  27. <br/>.<br/>


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. PROTIP: THEMES

    View full-size slide

  34. <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 full-size slide

  35. <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 full-size slide

  36. THERE’S A LOT OF CSS
    theithing is

    View full-size slide



  37. <br/>


    .button {
    background: var(- -fancy-button-background);
    }

    View full-size slide



  38. <br/>


    .button {
    background: var(- -fancy-button-background);
    padding: var(- -fancy-button-text-padding);
    }

    View full-size slide



  39. <br/>


    .button {
    background: var(- -fancy-button-background);
    padding: var(- -fancy-button-text-padding);
    opacity: var(- -fancy-button-opacity);
    }

    View full-size slide



  40. <br/>


    .button {
    background: var(- -fancy-button-background);
    @apply(- -fancy-button);
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. BRIDGES
    DRAGONS
    not
    you want

    View full-size slide