Chapter 9. Shadow CSS

This chapter covers

  • Keeping external style out of your Web Components
  • The Shadow DOM for CSS encapsulation
  • Shadow DOM CSS selectors
  • Rediscovering the ID attribute for Web Components

Let’s continue on with our Shadow DOM exploration! In the last chapter, we zeroed in on a really nice aspect of the Shadow DOM. As awesome as DOM encapsulation is, the CSS aspect of the Shadow DOM is even better! Despite coming up with clever ways to mitigate style creep in our web development work over the years, it has always been a problem.

9.1. Style creep

Style creep can sometimes be a bit of a headache in web development work. To sum up, it’s when CSS rules come in and affect elements you didn’t intend to affect. You may be working ...

Get Web Components in Action now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial