bug: React output target v0.7.0 overwrites classNames

[sean-perkins]

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.20.0

Stencil Framework Output Target

Angular

Stencil Framework Output Target Version

v0.7.0

Current Behavior

When assigning CSS classes to the generated react component wrapper, they will overwrite any host level classes set internally by the Stencil runtime. This causes many issues/problems.

Expected Behavior

CSS classes should be appended to the existing classes. This was the previous behavior with the old component wrappers.

Steps to Reproduce

1. Open reproduction
2. Click the checkbox
3. Inspect the DOM on the checkbox node
4. Observe: The CSS classes are overwritten
5. Upgrade to v8.3.1 (or any version of Ionic Framework where the output target is on the previous version)
6. Repeat steps
7. Observe: not-valid is appended to the existing class list

Code Reproduction URL

https://stackblitz.com/edit/gzdvsh?file=src%2Fmain.tsx

Additional Information

This is likely a problem in the @lit/react wrappers. Unsure if it is a compatibility issue with Stencil's runtime or a larger issue for the web component community. I'd suspect it would have been reported already if it impacted Lit.

[ionitron-bot]

Thanks for the issue!

This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README