bug: scoped component styles are not applied to child elements

[hbeyan]

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

4.22.2

Current Behavior

We have encountered the following issue with using non-shadow and scoped components on our projects: sometimes scoped classes of the component are not applied to the child elements of component, and breaks the styling.

When we checked the properties, we observed that "s-scs" on children is empty, and children classes doesn't contain the scoped class of component.

This issue doesn't happen in all platforms, but we could isolate to es5 targets on typescript, and to following code line

stencil/src/runtime/vdom/vdom-render.ts

Line 987 in 94fc60b

element.classList?.add(...(element['s-scs'] = [...scopeIds]));

and we think that it's caused by spread operator not being translated correctly for all typescript configurations, which is related to this typescript issue: microsoft/TypeScript#8856.

Expected Behavior

We expect that the children elements of scoped components should have the scoped classes of parent components.

System Info

No response

Steps to Reproduce

1. Clone the repo https://github.com/hbeyan/stencil-scoped-children-style
2. Run the project with "npm run start"
3. We have a component called"my-button, which gives "background-color: red;" to the regular "button" element inside.
4. Check the "button" element inside the "my-button" component, and see that "background-color: red;" is not applied. Class "sc-my-button" is not applied to the "button" element, also "s-scs" property is empty. Manually adding this class to "button" solves the issue.

Code Reproduction URL

https://github.com/hbeyan/stencil-scoped-children-style

Additional Information

No response

[yigityuce]

hey @christian-bromann @rwaskiewicz

@hbeyan is my colleague, and as a team we are having issue in our project due to the Set typedArray usage. Could you please prioritize this issue and the PR.

Thanks in advance.

[christian-bromann]

The patch provided by @hbeyan has been released in https://github.com/ionic-team/stencil/releases/tag/v4.22.3, thanks @hbeyan for the contribution.