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

Styling the Shadow Dom

Styling the Shadow Dom

Tiangle JS meetup talk about how to style the shadow DOM


Andres Galante

September 26, 2016

More Decks by Andres Galante

Other Decks in Technology


  1. @andresgalante Shadow Dom

  2. None
  3. Shadow Dom

  4. Heads Up

  5. 1. Never trust an Argentinean designer writing code.

  6. 1. Never trust an Argentinean designer writing code.

  7. 2. I am a Shadow Dom rookie

  8. Shadow Dom

  9. Custom elements + Shadow DOM = Self contained HTML, CSS

    and JS
  10. None
  11. None
  12. CSS

  13. The Shadow DOM

  14. The ShadowRoot A shadow root is a document fragment that

    gets attached to a “host” element.
  15. Light DOM + Shadow DOM = Composed DOM

  16. <slot> Placeholders inside your component that users can fill with

    their own markup.
  17. How to style the ShadowDOM

  18. None
  19. None
  20. None
  21. None
  22. None
  23. CSS selectors from the outer page don’t apply inside your

    component. Styles defined inside don’t bleed out. They’re scoped to the host element.
  24. :host(<selector>) selector Allows you to target the host if it

    matches a <selector>.
  25. ::host-context(<selector>) selector Matches the component if it or any of

    its ancestors matches <selector>.
  26. :slotted(<compound-selector>) selector Matches nodes that are distributed into a <slot>

  27. Styling a component from the outside.

  28. Style hooks using CSS custom properties CSS variables and mixins

  29. Access Card Demo Putting everything together

  30. None
  31. Can we use it?

  32. maybe

  33. Thanks :)