Native support for attributes

[aghassemi]

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]

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

[aghassemi]

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]

@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]

@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]

@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]

cc @Matt-Esch

[ahdinosaur]

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.

[aghassemi]

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