Setting a data attribute with more than one dash does not work about snabbdom-pragma HOT 6 CLOSED

I tried <a data={{'calc-key': calcKey}}> but an error occurs inside dataset module so seems is not doable to implement this use case. Anyway it would be good to document the behavior

This works: <a data={{calcKey: calcKey}}>

from snabbdom-pragma.

While for data- attributes will not work with property with dash, style accepts property with dashs so something like:

return <a style-background-color={'blue'}> will not work due to the way deepifyKeys works

from snabbdom-pragma.

deepifyKeys is parth of the Modules as attributes feature
Allowing you to consume Snabbdom modules from attributes without worrying about using object.

The drawback of this feature is every attribute using dash is considered as a module key, giving you the opportunity to set deep objects.

from snabbdom-pragma.

deepifyKeys is parth of the Modules as attributes feature

I've got that.

My issue is when the property has a dash, something like MODULE-PROPERTY-WITHDASH

I would expect that <div style-background-color={'blue'}> would set style.background-color property to 'blue'. The equivalent to h('div', {style: {'background-color': 'blue'}}) but instead it sets h('div', {style: {background: {color: 'blue'}}}).

IMO is a bug but if not at least should be documented

from snabbdom-pragma.

Snabbdom style module is using the both way to define style.

if (name[0] === '-' && name[1] === '-') {
  (elm as any).style.setProperty(name, cur);
} else {
  (elm as any).style[name] = cur;
}

As style in JS is mean to be used that way, you should really go using camelCase styles.

<div style-backgroundColor ={'blue'}></div>

But we should consider to do not split more than the first dash.

from snabbdom-pragma.

As style in JS is mean to be used that way, you should really go using camelCase styles

This is an option for style, but in case of class there is no option when the class name has a dash in it. The example bellow will set 'alertPrimary' class instead of 'alert-primary':

<div class-alertPrimary={true}></div>

In fact snabbdom modules handle properties with dash slightly different:

style module:

Accepts both properties with dash or with camel-case

h('div', {style: {'background-color': 'blue'}})

h('div', {style: {'backgroundColor': 'blue'}})

The examples below will produce the same effect

class module

Requires to use the property with dash because the camelCase one will match a different class

h('div', {class: {alertPrimary: true}}) // sets alertPrimary class

h('div', {class: {'alert-primary': true}}) // sets alert-primary class

dataset/data module:

An error occurs when using properties with dash (a restriction of HTMLElement.dataset)

h('div', {dataset: {itemKey: 1}}) //fine

h('div', {dataset: {'item-key': 1}}) // throws

In my option only the first dash should be split. Also, should be documented that dataset/data module does not accepts properties with dash

from snabbdom-pragma.