feat: hydrate - Remove scoped css classes if serializeShadowRoot is true.

[mayerraphael]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Currently Stencil scopes the CSS inside the Declarative Shadow DOM, which is not necessary anymore, as they are already isolated.

The bigger problem is that this bloats the size of the HTML massively.

Describe the Use Case

A simple css class like

.left-0 {left:var(--spacing-0)}

is bloated to

/*!@.left-0*/.left-0.sc-my-maybe-long-component-name{left:var(--spacing-0)}

This round about triples the size of css classes.

Here another example:

/*!@.button.primary:focus-within.focus-wcag-none:not(:hover,:active,.suppressFocusStyle)*/
.button.primary.sc-my-maybe-long-component-name:focus-within.focus-wcag-none:not(:hover, .sc-my-maybe-long-component-name:active, .suppressFocusStyle).sc-my-maybe-long-component-name {
    outline: 2px solid var(--button-stroke-primary-focus)
}

Describe Preferred Solution

No additional classname CSS selector necessary. No CSS comments necessary.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[mayerraphael]

Currently this also means that the ::slotted selectors are broken.

They are scoped to

/*!@.container ::slotted(img)*/
.container .sc-my-component-s>img {}

This selector only works with the old SSR where everything was in light DOM.