Learn about the new Light DOM feature for Lightning Web Components, its use cases, and, how to leverage it without compromising security …
Here are highlights from article Demystifying Light DOM and Its Use Cases
1. Light DOM is a feature in Lightning Web Components that can be enabled in selected components to prevent the default shadow DOM from affecting them.
2. To activate light DOM, the light renderMode needs to be specified in the component’s JavaScript file and the lwc:render-mode template directive on the tag of the component.
3. When light DOM is activated, the component markup is attached to the host element instead of the shadow tree, allowing other components to access it.
4. Light DOM components allow the use of standard browser query APIs like querySelector and querySelectorAll to access the markup.
5. Light DOM is recommended for components that need to use standard browser query APIs, apply global styling, or implement accessibility best practices, as long as they don’t expose sensitive data. It is not recommended for components that work with sensitive data as it removes shadow DOM encapsulation and exposes components to DOM scraping.
You can read it here: https://sfdc.blog/XghaW
Source from developer(dot)salesforce(dot)com