search

ionic-team / stencil-ds-output-targets

These are output targets that can be added to Stencil for React and Angular.
https://stenciljs.com
MIT License
251 stars 117 forks source link

bug: React output target v0.7.0 overwrites classNames #485

Open sean-perkins opened 1 month ago

sean-perkins commented 1 month ago

Prerequisites

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[bot] commented 1 month ago

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