Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
brokenalarms opened this issue Oct 20, 2016 · 2 comments
Open

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

brokenalarms opened this issue Oct 20, 2016 · 2 comments

Comments

@brokenalarms
Copy link

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 brokenalarms changed the title How to distinguish between attributes and props? How to distinguish between attributes and props? API doesn't match for virtual-dom Oct 20, 2016
@brokenalarms brokenalarms changed the title How to distinguish between attributes and props? API doesn't match for virtual-dom API doesn't match for virtual-dom - no way to set attributes? Oct 20, 2016
@brokenalarms
Copy link
Author

brokenalarms commented Oct 20, 2016

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
Copy link

fiatjaf commented Oct 29, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants