Extend class value helper to other attributes

[tigt]

Description

The transformation of passed arrays/objects to the class attribute is very convenient. While not used nearly as often as class (though, really, what attribute is), there are other attributes that accept a list of space-separated values.

Possible Implementation & Open Questions

The attributes in question:

• <a>, <link>, and <area>’s shared rel attribute
• iframe[sandbox]
• output[for]

One could ship a list of attribute names to enable this behavior, or maybe the runtime could check for the presence of DOMTokenList? Alternatively, an attribute modifier of :list could work.

Or… what if Marko just did this for any attribute you pass an array to? Space-separated values are essentially how HTML codifies arrays in attribute values, so that seems like a nice fit to me. That may help solve #1391, even! And now that I think about it, there are plenty of attributes that accept space-separated values that aren’t DOMTokenLists:

• Any of the aria-* attributes that accept a list of ids
• autocomplete
• accesskey
• <th> and <td>’s shared headers attribute
• link[rel=icon][sizes]
• itemprop, itemref, itemtype
• a[ping]
• Lots of weird stuff in SVG: viewBox, d, etc.

One thing to consider are other attributes that are lists of values, but specced as comma-separated tokens. Marko could be smart enough to do the right thing with those, maybe? (Which would be as simple as doing nothing — passing an array to .setAttribute() stringifies it, which is the same as .join(',').)

• input[accept]
• img[sizes], img[srcset]
• area[coords]
• input[type=email][value]

Is this something you're interested in working on?

Yes

[tigt]

A Marko maintainer expressed it could be slow to introduce if (Array.isArray) into a path as hot as attribute value-setting. I wonder if it would be possible to safely overwrite .toString() somehow on such values…

[tigt]

At the very least, I may open a PR to extend this to the attributes where #1391 is a problem:

• for on <label> and <output>
• headers on <th> and <td>
• aria-labelledby, aria-describedby, aria-controls, aria-flowto, and aria-owns