Styling the Shadow Dom

Tiangle JS meetup talk about how to style the shadow DOM

Transcript

1. @andresgalante Shadow Dom
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
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
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
31. Can we use it?
32. maybe
33. Thanks :)