Enable Native Shadow DOM (and drop IE Support)?

[lukethacoder]

Is your feature request related to a problem? Please describe.

Wondering if/when on platform will allow (even via an opt-in checkbox) native shadow DOM. It is much more powerful than @lwc/synthetic-shadow (for obvious reasons - IE support, which as of June 15 2022 is retired and out of support).

Describe the solution you'd like

Looking for some information around native shadow dom coming to on platform (if/when - should I not get my hopes up). More than happy for this to be answered and closed.

The main driver for this is some styling quirks of using on-platform/@lwc/synthetic-shadow and the minor diffs in the API (host vs shadowRoot)

::slotted() being one key feature I'd love to be able to use. It works great without @lwc/synthetic-shadow but flicking it on, I can't seem to find a suitable alternative (bar a global stylesheet, which I'd rather not do given the nature of web components).

• [css] add support for ::slotted selectors #58 looks like this hasn't had much action since 2020
• ::part pseudo-element support #2016 (comment) mention that migrating to native shadow would be a sizable job given all the OOTB components would need to be migrated

Describe alternatives you've considered

• Global Stylesheets: would rather not given the nature of web components. I should be able to drop the LWC in anywhere across the platform and not have to load in a monolith stylesheet
• JavaScript inlining via .style.setProperty(): gets the job done, but pollutes the DOM with a heap of inline styles.

Additional context

[nolanlawson]

Hi @lukethacoder thanks for opening the issue. As you point out, certain features like ::part and ::slotted are only available in native shadow, not synthetic shadow. We do not intend to add these features to synthetic shadow.

The current status of native shadow support for the LWC open-source project is this:

1. If you don't import @lwc/synthetic-shadow, you are running in native shadow mode!
2. Otherwise, you must set lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE = true (see this). Then you can use mixed shadow mode in your components.

On the Salesforce Lightning platform, we are actively working to enable mixed shadow mode, but I cannot give a precise timetable.

[lukethacoder]

Oooh, so I read that as on-platform will eventually get native shadow DOM mode? Keen for that, even if that is a long ways off.

I am aware of how to disable it off-platform, but want to keep it on as we are building for on-platform. Using the open-source instance purely for a speedier development flow (lwc-localdev-server type setup).

Completely understand not bothering with ::part and ::slotted in the synthetic shadow if native is being planned for (and presumably the synthetic shadow will eventually be deprecated).