Shadow DOM vs. Modern CSS
Stephanie Eckles Senior Design Engineer Adobe
Recent CSS features like cascade layers, @scope, 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.
Native HTML elements you should already be using: building without Javascript.
Harrison Broadbent Software Engineer HotDoc
HTML has come a long way since the early 2000s. It’s no longer limited to clunky forms and buttons — with modern HTML (and a little CSS), it’s possible to build rich, interactive components like modals, accordions, and more. These Javscript-free components are often (but not always) functional enough to rely on instead of their scripted brethren, simplifying your frontends and making them more maintainable (less JS dependencies!). Join me as we explore the power of modern HTML & browser APIs (ie: Popover API, new base-select styling), plus some of their limitations.