Use class instead of className for unidentified DOM elements (better support for styling web components)

[seanaguinaga]

I'd like stitches to use class instead of className when components are not recognized or are web-components.

Please watch video for demo of issue/request (2 mins long)

Video

https://github.com/styled-components/styled-components/blob/main/CHANGELOG.md

Styled Components should release this in v6 and there might be more information about this styling issue in their repo.

[peduarte]

Hi Sean, thanks for the video. That was super helpful 🙏

We'd need to look into this. Also, we'd need to experiment with different approaches and ensure it doesn't affect performance and/or bundle size too much - if we decide to go ahead.

How do you see this working?

• You explicitly tell Stitches that it's a web component?
• Happens seamlessly, the library "knows" its a web component and uses class instead?

Related: https://reactjs.org/docs/dom-elements.html#classname

[seanaguinaga]

• Happens seamlessly, the library "knows" its a web component and uses class instead?

I would have it check this list:

domElements

and switch to class if not found.

Which is an approach others use: (I asked via twitter)

https://twitter.com/seanaguinaga/status/1409614205389459469?s=20

[jonathantneal]

We talked about making the className property configurable, and that might be my recommendation here.

As far as the implementation expectations — those I’m concerned with.

The cited list of elements is used to "handle custom elements which React doesn't properly alias". Why does React not properly alias custom elements? That seems like a problem. If it’s a problem, might this break once React fixes it? Or is this a (probably unhelpful, but) deliberate decision? And are we sure React has problems with just custom elements?

And are all property aliases ignored, or is this limited to class / className? For what it’s worth, React already does not properly alias a long list of properties (like the ARIA reflection properties (not attributes)).

That list also reflects "all valid HTML5 elements", but which release of HTML5 is this? I do see some HTML elements in there, but also some SVG elements, and no MathML elements. I see no HTML template element or HTML slot element in there, either. Did they happen to forget template? I want to doubt this. Instead, does React use a similar hand-wavy list internally that’s been copied by SC?

If we were to detect custom elements and swap property names accordingly, why not check for a hyphen dash (-) instead of a long, ever-changing list of elements? A dash is required for custom elements. In the video, the dash is properly used.

In summary, the request by @seanaguinaga seems super fair to consider 👍, but the implementation details leave me with a lot of concerns.

[seanaguinaga]

Configurability seems like a great solution to prevent any unintended bugs.

Do you see that being on a per

styled("ion-button" , { webComponent: true});

kind of a thing?

or in the stitches config?

[seanaguinaga]

Another way would be to use the most comprehensive/up to date list of HTML5 Elements

[peduarte]

Thanks Sean. Will have a think. We're currently working on the TypeScript layer so will likely wait for it to finish before looking into this.

[seanaguinaga]

Thanks guys!

Thank you Sean Aguinaga

On July 6, 2021, "dependabot[bot]" @.***> wrote:

Thanks Sean. Will have a think. We're currently working on the TypeScript layer so will likely wait for it to finish before looking into this.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/modulz/stitches/issues/654#issuecomment-875315355, or unsubscribe <https://github.com/notifications/unsubscribe- auth/ADUMGRG34JYLSJL3MUIPCRDTWPV7PANCNFSM47OSWIYQ>.

[seanaguinaga]

@peduarte did the TypeScript layer end up getting finished?