bug: ::slotted(...) selector not working appropriately in scoped: true component

[johnjenkins]

Prerequisites

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

Stencil Version

latest

Current Behavior

::slotted(...) selectors in scoped: true components are not working properly due to the css selector not having enough specificity.

This is due to a regression added via the recent client-hydrate re-write which incorrectly applies the internal / scoped className to the slotted elements *edit this has been true for a while in Stencil

Expected Behavior

slotted selectors should be applied to slotted nodes

System Info

No response

Steps to Reproduce

Open https://stackblitz.com/edit/stencil-start-ydmeww :

npm run build && npm run express

In the preview window, click on 'non-shadow-css-slotted'.

Notice the slotted node has the wrong colour.

Code Reproduction URL

https://stackblitz.com/edit/stencil-start-ydmeww

Additional Information

No response