webc icon indicating copy to clipboard operation
webc copied to clipboard

`webc.renderAttributes` loses dashes from original attribute names

Open Gyanreyer opened this issue 1 year ago • 1 comments

I have a component which accepts data- attributes like data-image-width. Obviously this gets serialized as dataImageWidth on the webc.attributes object, but then if you run webc.renderAttributes(webc.attributes), the attribute ends up getting serialized as dataimagewidth, losing the dashes. Here's a template which should reproduce it:

<!-- my-component.webc -->
<script webc:type="js" webc:root="override">
  `<div ${webc.renderAttributes(webc.attributes)}></div>`
</script>
<!-- page.webc -->
<my-component data-image-width="100"></my-component>

Current output:

<div dataimagewidth="100"></div>

Desired output:

<div data-image-width="100"></div>

Gyanreyer avatar Nov 02 '24 00:11 Gyanreyer

Wanted to add that I'm actually seeing this behavior with @attribute as well. This is a pretty big issue because it's killing aria-X attributes that I want to pass through to components. Example:

<!-- my-component.webc -->
<div @attributes>
</div>
<!-- page.webc -->
<my-component aria-label="A label"></my-component>

Current output:

<div arialabel="A label"></div>

Desired output:

<div aria-label="A label"></div>

Gyanreyer avatar Nov 04 '24 17:11 Gyanreyer

Fix shipping with v0.12.0-beta.1 on both @attributes and webc.renderAttributes, thank you!

zachleat avatar Aug 21 '25 21:08 zachleat