On 8/3/2011 8:51 AM, Anne van Kesteren wrote:
On Wed, 03 Aug 2011 17:46:50 +0200, Glenn Maynard <gl...@zewt.org> wrote:
What's the difference?

ele.setAttribute(x, val) works on any element. ele[x] = val does not. They also behave differently for a large number of cases and the latter often takes values of a type other than DOMString.
Seems to me that aria- and data- prefixes are a special case:
data-* and aria-* should always run through the setAttribute code path.

IE9 does have aria attributes on the element as well, in camel case:
element.ariaSelected===element.getAttribute('aria-selected')

It's "always" going to be the case, that setting 'data-*' or 'aria-*' will assign a DOM string content attribute.
I'd expect this:

a = Element.create("a", {href: "http://link";, onclick: function(e) { },
custom: "value" }, "link");

to be essentially equivalent to

a = document.createElement("a");
a.appendChild(document.createTextNode("link"));
attrs = {href: "http://link";, onclick: function(e) { }, custom: "value" };
for(key in attrs) a[key] = attrs[key];

Would you expect to write contenteditable as contenteditable or as contentEditable? Also, would you expect custom to end up as a content attribute on that <link> element? Because it will not with this code.


contentEditable, tabIndex,  innerHTML seem appropriate.
data-* and aria-* should always run through the setAttribute code path.

The DOM footprint should be light.

Example:
Element.create('a', { webkitShadow: Element.create('p','example shadow paragraph') }, 'this is a link & button') .
    attr({role: 'button', onclick: function() { alert('clicked!') }).
attr({tabIndex: 0, data-status: 'this is an example', custom-attribute: 'not serialized'}).
   attr({title: 'title example!', href: 'link.html'});

outerHTML, more or less:
<a title="title example!" role="button" tabindex="0" data-status="this is an example" href="link.html">this is a link &amp; button</a>

webkitShadow here:
https://lists.webkit.org/pipermail/webkit-dev/2011-June/017340.html

If an author already has their string sanitized, they would pass through the innerHTML attribute anyway.
var x = document.createElement; has not been a reliable shortcut.
var x = Element.create(); could be.

-Charles

Reply via email to