Support for conditional attributes?

[saschanaz]

html`
  <div data-something-optional="${nullableValue}"></div>
`

It can be useful if we get a declarative HTML way to conditionally define an attribute. Thoughts?

cc @sidvishnoi

[saschanaz]

It seems the feature already exists but is limited to the specific attributes.

nanohtml/lib/bool-props.js

Lines 3 to 8 in bdd0efe

	module.exports = [
	'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default',
	'defaultchecked', 'defer', 'disabled', 'formnovalidate', 'hidden',
	'ismap', 'loop', 'multiple', 'muted', 'novalidate', 'open', 'playsinline',
	'readonly', 'required', 'reversed', 'selected'
	]

[sidvishnoi]

@saschanaz Although I like the implicit nullablitly, a better syntax for above could be:

<div data-something?="${nullableValue}"></div>

It'll also avoid a rare but potential clash with having optional in attribute name.

[goto-bus-stop]

A way to do this today is using object spread:

const optional = {}
if (nullableValue) optional['data-something-optional'] = nullableValue
html`
  <div ${optional}></div>
`

it's a bit verbose but I think I prefer it over introducing custom syntax.

It is a bit strange that undefined and null values still output the attribute imo. I would maybe like to see that change in a future major release.

e; it can be made less verbose with a helper,

function optional (attr, value) {
  if (value) return { [attr]: value }
  return {}
}
html`
  <div ${optional('data-something', nullableValue)}></div>
`

[saschanaz]

It'll also avoid a rare but potential clash with having optional in attribute name.

The -optional was just an arbitrary name rather than a way to make it optional 😁

html`
 <div ${optional('data-something', nullableValue)}></div>
`

Seems less verbose than inserting conditional block everywhere 👍, but is <div ${object}> a documented feature?

[goto-bus-stop]

it looks like it's missing from the docs, yes. it is definitely a tested and supported feature, though!

[saschanaz]

<div data-something?="${nullableValue}"></div>

It'll also avoid a rare but potential clash with having optional in attribute name.

? still is a valid attribute character.

document.createRange().createContextualFragment("<a what?='abc'>").children[0].getAttribute("what?")
// "abc"