kbrsh/moon

Some attributes have to be set by attribute and not by DOM

LeviSchuck opened this issue · 3 comments

Well, this was a funky roadblock.

Apparently the list attribute on input elements is read only, and has to be set by element attribute instead.

Similar can be found on aurelia/framework#646 (comment)

The sample in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist has been modified to be compatible with the moon compiler.

You can reproduce this in the playground with

const Demo = ({ data }) => (
	<div>
		<h1>Demo</h1>
		<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
		<datalist id="ice-cream-flavors">
			<option value="Chocolate" />
			<option value="Coconut" />
			<option value="Mint" />
			<option value="Strawberry" />
			<option value="Vanilla"/>
		</datalist>
	</div>
);

Moon.use({
	view: Moon.view.driver("#root")
});

Moon.run(() => ({
	view: (<Demo />)
}));

It fails on

} else {
	// Set a DOM property.
	element[key] = value;
}

Seems hacky.. but may I recommend attr-<key>=value as a workaround pattern?
That would keep the code size small and not have a ever expanding whitelist of offending tags and attributes. Then it would be element.setAttribute(key.replace(/^attr-/, ''), value) maybe

kbrsh commented

This is interesting! I've tried looking into finding attributes that can't be set with DOM properties, but I didn't come across any.

I'm not sure what the ideal workaround is. Maybe something like attr-<key>, but I would like to avoid adding another check in the logic for creating, updating, and removing properties for super specific attributes. I'll also consider something like ref to give access to the DOM node so that you can do whatever you wish with it.

kbrsh commented

I added a new property type that allows you to set attributes like this:

<input attributes={
   list: "ice-cream-flavors"
}/>

Note that this uses a new syntax that allows any literal in attribute values. These should be coming in the next beta (which should hopefully be the last one).

kbrsh commented

attributes was added in Moon v1 beta 5