Allow hyphenated properties to be defined in a component

Is your feature request related to a problem? Please describe.

Given the usage of the following hypothetical component:

<Icon data-tooltip="foobar" />

I receive a warning that data-tooltip has not been declared as a property on the Icon component. However, there is no way to do that since it is hyphenated.

Describe the solution you’d like

Inside my component, it would be nice if I could declare the property like this:

export let dataTooltip = null

Describe alternatives you’ve considered

I know that the properties are also available in $$props. But that doesn’t really solve the problem.

const dataTooltip = $$props['data-tooltip']

While this would give me access to the value, it doesn’t remove the in browser warning.

How important is this feature to you?

It’s annoying. Important? Well, certainly not a deal killer. And for now I just am using the form: <Icon tooltip="foobar" />. And then I am passing the property to the hyphenated version inside the component.

The reason this came about was I was trying to just use a spread operator and pass props thru. But, here I cannot because I don’t want to keep seeing those warnings all over the place.

[oranmor]

@osamamaruf I’ve faced this problem too. As temporary solution I’ve written my own wrapper for CustomElement, where all camelCased attributes are converted to dash-case:

import MyCustomComponent from './MyCustomComponent.svelte';

class MyCustomComponentWrapper extends MyCustomComponent {
  static get observedAttributes() {
    return (super.observedAttributes || []).map(attr => attr.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase());
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    attrName = attrName.replace(/-([a-z])/g, (_, up) => up.toUpperCase());
    super.attributeChangedCallback(attrName, oldValue, newValue);
  }
}

customElements.define('my-custom-component', MyCustomComponentWrapper);

MyCustomComponent.svelte

<script>
  export let someDashProperty;
</script>

<svelte:options tag={null} />

{someDashProperty}

Then you can use it in this way:

<my-custom-component some-dash-property="hello"></my-custom-component>

Hope it helps until fix is coming

[sawden]

2 years and the workaround is still the best solution? 😕