Styling the Shadow Dom

Transcript

1. 1.

   @andresgalante Shadow Dom

2. 2.

   None
3. 3.

   Shadow Dom

4. 4.

   Heads Up

5. 5.

   1. Never trust an Argentinean designer writing code.

6. 6.

   1. Never trust an Argentinean designer writing code.

7. 7.

   2. I am a Shadow Dom rookie

8. 8.

   Shadow Dom

9. 9.

   Custom elements + Shadow DOM = Self contained HTML, CSS

   and JS
10. 10.

    None
11. 11.

    None
12. 12.

    CSS

13. 13.

    The Shadow DOM

14. 14.

    The ShadowRoot A shadow root is a document fragment that

    gets attached to a “host” element.
15. 15.

    Light DOM + Shadow DOM = Composed DOM

16. 16.

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

    their own markup.
17. 17.

    How to style the ShadowDOM

18. 18.

    None
19. 19.

    None
20. 20.

    None
21. 21.

    None
22. 22.

    None
23. 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. 24.

    :host(<selector>) selector Allows you to target the host if it

    matches a <selector>.
25. 25.

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

    its ancestors matches <selector>.
26. 26.

    :slotted(<compound-selector>) selector Matches nodes that are distributed into a <slot>

27. 27.

    Styling a component from the outside.

28. 28.

    Style hooks using CSS custom properties CSS variables and mixins

29. 29.

    Access Card Demo Putting everything together

30. 30.

    None
31. 31.

    Can we use it?

32. 32.

    maybe

33. 33.

    Thanks :)