Native shadow DOM will bring your LWC components into closer alignment with web standards, new browser features, and improved performance …
Here are highlights from article Get Your LWC Components Ready for Native Shadow DOM in Spring ’24
1. History of shadow DOM and LWC:
– LWC was one of the first web component frameworks to use shadow DOM.
– Synthetic shadow DOM was created as a partial polyfill to support legacy browsers.
– Synthetic shadow DOM covers most, but not all, of the shadow DOM standard.
– LWC chose to serve the polyfill to all browsers for consistent behavior.
2. Changes in browser support and new features:
– All supported browsers in Lightning Experience now support shadow DOM.
– Browser vendors are shipping new shadow DOM features.
– Native shadow DOM is faster than synthetic shadow DOM.
3. Sunset of synthetic shadow DOM:
– Synthetic shadow DOM is being phased out.
– Minor inconsistencies may prevent components from supporting native shadow DOM out of the box.
– A gradual migration approach is being introduced.
4. Introducing shadow DOM mixed mode:
– Component authors can opt into native shadow DOM on a component-by-component basis.
– Use the shadowSupportMode static property to enable native shadow DOM.
– Testing in native shadow DOM mode may require modifications to components.
5. Considerations for component authors:
– Test components in native shadow DOM mode to ensure compatibility.
– Modify components to properly support native shadow DOM if errors occur.
– Some issues, such as styling, may be difficult to test in a headless environment.
You can read it here: https://sfdc.blog/bjocp
Source from developer(dot)salesforce(dot)com