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

Native support for attributes #6

Closed
aghassemi opened this issue Jul 26, 2014 · 8 comments
Closed

Native support for attributes #6

aghassemi opened this issue Jul 26, 2014 · 8 comments

Comments

@aghassemi
Copy link

It would be nice to have first-class support for attributes on vNodes even-though attributeHook is a pretty straightforward work-around and properties already cover most use cases.

Maybe something like:

h('div', { attr-foo: "bar" })
@Raynos
Copy link
Owner

Raynos commented Jul 26, 2014

Have you tried 'h("div", { attributes: { foo: "bar" } })'

@aghassemi
Copy link
Author

Just tried it, didn't work. Looks like setting attributes must go through Node.setAttribute(), Node.attributes has been removed from the spec and Mozilla removed their implementation as well.

@Raynos
Copy link
Owner

Raynos commented Jul 28, 2014

@aghassemi

Since Firefox 22, Node.attributes is no longer supported (not implemented by other browsers and removed from the spec). It is only supported on Element (Element.attributes).

attributes is a property of Element as per the DOM spec

The deprecation notice was a notice of it not working for Node.

@Raynos
Copy link
Owner

Raynos commented Jul 28, 2014

@aghassemi your right, attributes is a read only object as per the spec.

We don't have any way to set attributes without using hooks.

@aghassemi did you know what most attributes have a property alternative interface.

@aghassemi
Copy link
Author

@Raynos Right, it's there but can't be set directly without using setAttribute.

Most attributes do have corresponding properties, but there are important ones that don't, like ARIA which is crucial for accessibility.

so

h('div', { role: "button", ariaPressed: "true" }, ["Click me"]);

doesn't work but

h('div', { "role": new attributeHook("button"), "aria-pressed": new attributeHook(true) }, ["Click me"]);

does. (tested with Chrome + Vox)

Another place where properties vs attributes distinction becomes obvious is CSS attribute selector for custom attributes, a css role like:

div[type=foo] {
  color: red;
}

doesn't apply to:

h('div', { type: "foo" }, ["bar"]);

but does apply to

h('div', { type: new attributeHook("foo") }, ["bar"]);

Would use of a hook like the attributeHook cause the dom to be always patched when vdiff happens? If so, that could be another good reason to support attributes naively in vdom.

@Raynos
Copy link
Owner

Raynos commented Jul 28, 2014

cc @Matt-Esch

@ahdinosaur
Copy link

i'm also wondering about this, as i want to start making my virtualdom components conform to ARIA.

+1 to attr-foo syntax.

it's also an important issue if we want to be able to stringify vtrees with ARIA attributes into html, which is a requirement for virtualdom components to be accessible without client-side javascript.

ahdinosaur pushed a commit to ahdinosaur/virtual-hyperscript that referenced this issue Sep 1, 2014
@aghassemi
Copy link
Author

Looks like Matt-Esch/virtual-dom now supports attributes. Thanks! Closing this issue.

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

3 participants