Third-party tooling and testing: Light DOM allows third-party tools to traverse the DOM, enabling standard browser query APIs like querySelector and querySelectorAll, without traversing the shadow root.CSS theming and branding: Light DOM facilitates global styling, enabling you to apply custom branding to your components and child components easily.Light DOM provides several advantages over shadow DOM. Although both synthetic and native shadow behave similarly, LWC OSS uses native shadow, which appears as #shadow-root (open) tag when you inspect it.įor a comprehensive overview, see Google Web Fundamentals: Shadow DOM v1. Let's look at how the different DOM structures render in the DOM before we dive into light DOM. Use light DOM to avoid these limitations and allow your component markup to move outside of the shadow DOM.
Shadow DOM encapsulates a component's internal markup and makes it inaccessible to programmatic code. The LWC framework enforces shadow DOM on every component, which poses challenges for some third-party integrations and global styling.
