Shadow DOM vs. Modern CSS
Recent CSS features like cascade layers, , and container queries are incredible tools for general style management. Except, there’s one context where things can get a bit strange, and that is when those styles are expected to be applied both globally and within the shadow DOM. Builders of web component-based architecture are highly likely to encounter these barriers, especially as there is a lack of awareness about the behavior of modern CSS across shadow boundaries. Let’s uncover those potential styling pitfalls, and explore techniques that allow using modern features and inherent shadow DOM behavior in harmony.
Stephanie Eckles
Stephanie Eckles is a Senior Design Engineer for Adobe Spectrum CSS. She's also the author of ModernCSS.dev which provides modern solutions to old CSS problems as in-depth articles, and is the creator of StyleStage.dev, and author of SmolCSS.dev and 11ty.Rocks. Steph has 15+ years of webdev experience that she enjoys sharing as an author, workshop instructor, Twitch streamer, and conference speaker. She's an advocate for accessibility, scalable CSS, and web standards. Offline, she's mom to two girls and a cowboy corgi and enjoys baking and watercolor painting.