choojs / hyperx

🏷 - tagged template string virtual dom builder
BSD 2-Clause "Simplified" License
1.01k stars 48 forks source link

API doesn't match for virtual-dom - no way to set attributes? #37

Open brokenalarms opened 7 years ago

brokenalarms commented 7 years ago

Hi

If am creating a tree that includes a webcomponent which updates on attributeChangedCallback. However, through hyperx, all specified attributes end up being passed to virtual-dom as props, because attributes need to be all passed together within an attributes sub-object. Currently with a view like below:

return html `<my-web-component class="${className}"
                            data-src="${src}"
                            style="display:flex;width:${width}px;height:${height}px">
                        </my-web-component>`

...all the three attributes end up being assigned directly to the DOM element rather than via setAttribute.

I realize this is perhaps because virtual-dom does not adhere to the hyperscript API (as specified, h(tagName, attrs, children), when virtual-dom actually takes h(tagName, props ={attributes: {} }, children)). But if hyperx shouldn't be expected to account for these differences, then the documentation should probably be updated to let people know it won't work as expected with virtual-dom specifically and save some time :) Thanks!

brokenalarms commented 7 years ago

Tried hyper-script, but as per their documentation:

Note that hyperscript sets properties on the DOM element object, not attributes on the HTML element.

So basically this approach does not work with web components reliant on attributeChangedCallbacks?

Specifically, I was using morphdom for this (which just assigns everything as attributes (to my mind, correctly for the purposes of how the element is represented in the view function), but thought I'd try hyperxbecause it enabled for more generic switching layer and use of hyperxify.

fiatjaf commented 7 years ago

Maybe it would work if you created a thin wrapper around vdom.create so everything is passed as attributes?