Styling the Shadow Dom

Styling the Shadow Dom

Tiangle JS meetup talk about how to style the shadow DOM

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

September 26, 2016
Tweet

Transcript

  1. 2.
  2. 10.
  3. 11.
  4. 12.

    CSS

  5. 14.

    The ShadowRoot A shadow root is a document fragment that

    gets attached to a “host” element.
  6. 18.
  7. 19.
  8. 20.
  9. 21.
  10. 22.
  11. 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.
  12. 30.
  13. 32.
  14. 33.