Cannot set data-* attribute on VirtualDOM.

Hi,

I try to set data-* attribute to element with no luck on virtual-dom

For example: This working:

hx`<a href="${pagination.links.next}">Next</a>`

But this is not:

hx`<a href="#" data-href="${pagination.links.next}">Next</a>`

I’ve googled and found this https://github.com/Matt-Esch/virtual-dom/blob/master/docs/vnode.md#custom-attributes-data- which maybe related to my issue.

[tswaters]

Sorry for all the noise there, pushed up some force commits after I noticed some errors…

The PR has been adjusted to use a flag, {vdom: true} - this will fix data-, aria- and style being passed as a string. I noticed that tabindex and role both seemed to work without any explicit modifications, so maybe that was a bug upstream that is now fixed.

That reminds me - on the note of upstream bugs. Note that the tests relating to style as a string won’t pass unless min-document v2.18.1 is present, due to this bug. This matches the version in this package.json so it should be fine.

[arturi]

This is an issue with aria (and thus accessibility) too, I’m currently struggling with it: since I have a nested tree of elements that I want to put attributes like aria-hidden on. Works fine with bel, but not virtual-dom.

Maybe we could really put this behind a supportVDomAttributes flag, as suggested in https://github.com/substack/hyperx/pull/29, or something?

return html`<div class="Uppy UppyTheme--default UppyDashboard ${isTouchDevice ? 'Uppy--isTouchDevice' : ''}"
                 aria-hidden="${modal.isHidden}"
                 aria-label="Uppy Dialog Window (Press escape to close)"
                 role="dialog">
    <div class="UppyDashboard-inner" tabindex="0">
      ...
    </div>
</div>

All attributes — aria, role, tabindex — except for class are missing from the resulting DOM.