Using dash-case attributes in JSX

[dgibson666]

Stencil version:

 @stencil/core@.15.2

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

If you're supposed to use camelCase on attributes in JSX, why does dash-format work almost all of the time? We built an entire demo site for our components using other components. The demoed components are output in their render methods via JSX. But we've been using dash-format for those attributes all along and it worked fine (actually copied from some static HTML demo pages way back). But there's one case where things do not work:

1. If you define a camelCase Boolean prop and default it to true,
2. Then try to set it to false via the attribute on the custom element using dash-format, it doesn’t update.
3. If you use camelCase in the attribute, however (per updated docs CamelCase @Prop() declaration don't work site#114), it does update properly.

If you just use a one-word prop/attribute or no camelCase in the prop, everything works as expected as far as the prop assignment goes.

Expected behavior:

If you're going to still support dash-format for attributes in JSX, then this should still work, as every other case seems to. This would be nice so we don't have to demo two different scenarios for usage in our component docs.

Steps to reproduce:

// insert any relevant code here
@Prop() showHeader: boolean = true;
...
<my-component show-header={false}>  - does not work in JSX (yet dash case works in every other scenario across dozens of components and their props)

[aderaaij]

Agreed. In fact, it seems that a lot of camelcase attributes don't work at all. I thought I could make use of a React SVG to JSX converter, but found that the camelCasing of attributes like stop-opacity and stop-color led to those attributes not being picked up at all. At the other hand, xlink:href does need to be camelcased (or just use href nowadays), making things a bit awkward.

[snowyu]

The typescript does not support name spaced attribute syntax currently: microsoft/TypeScript#7411

A better way is to write a preprocessor to do that. such as like markdown.

return (```pug
svg
   use(xlink:href="....")
```)


return ```xhtml
<svg><use xlink:href="..."/></svg>
```

`

[adamdbradley]

Thank you for opening the issue. However, at this time we've decided to not implement this feature. If more requests are made we'll reevaluate then. Thanks.