Why preact/compat ignoring the selected attribute of a option?

[nihil-pro]

I have an custom element, which uses options as children. But, when i pass the selected attribute, result of option.getAttribute('selected') is null, and also, the MutationObserver didn't react on this attribute change

[rschristian]

Can you please provide a reproduction? There's not much we can say on the matter from your description alone.

[JoviDeCroock]

Ok. I'm using the data attribute now, but I think you're wrong. That's what I mean. The 'selected' should be set as attribute, just like in the browser.

Before you say this I really think you should read yourself into this knowledge 😅 these blanket statements of you're wrong are really offensive and talk down on the wealth of knowledge we as maintainers have to gather to even engage with these subjects let alone create a library like this.

I am stepping away from this conversation as you don't really want to discuss the differences between JS/HTML either way nor do you want to find the middle ground. I am happy to improve this library when it's appropriate but comparing everything to the HTML equivalent feels a bit like you're trying to dodge the conversation and pushing your opinion.

[nihil-pro]

Ok. I'm using the data attribute now, but I think you're wrong. That's what I mean. The 'selected' should be set as attribute, just like in the browser.

Before you say this I really think you should read yourself into this knowledge 😅 these blanket statements of you're wrong are really offensive and talk down on the wealth of knowledge we as maintainers have to gather to even engage with these subjects let alone create a library like this.

I am stepping away from this conversation as you don't really want to discuss the differences between JS/HTML either way nor do you want to find the middle ground. I am happy to improve this library when it's appropriate but comparing everything to the HTML equivalent feels a bit like you're trying to dodge the conversation and pushing your opinion.

I use a translator because I don't speak English. There was no attempt to offend in my message, I apologize if this was understood that way.

[rschristian]

The 'selected' should be set as attribute, just like in the browser.

Preact runs in the browser, so I'm not quite sure what you're referring to.

HTML and the DOM are two different interfaces that have some overlap; they work differently. Preact, as it's JS, works with DOM, and therefore properties, primarily. We work in the same way as vanilla JS here. The selected attribute is not reflected as it's not meant to show the currently selection option, but an initial value.

If you want to set an initial value only (as you still haven't clarified use), there is the defaultSelected property which reflects to the selected attribute?

[nihil-pro]

I understand difference between html and js. I want to say, that if preact will set selected as an attribute, nothing brokes, because:

const select = document.createElement('select')
const option = document.createElement('option')
option.setAttribute('selected', '')
select.appendChild(option)
document.documentElement.appendChild(select) 
// after append, option.selected will be true according to the presence of the selected attribute

[rschristian]

I don't think this conversation is productive.

We work primarily with DOM properties, as do nearly all JS frameworks. This behavior is entirely intended.

If you need the selected attribute, there's a number of workarounds that have been suggested from which you'll need to pick one. Good luck.

[nihil-pro]

One more question please.
A little problem with dreggable attribute.
Warning: This attribute is enumerated and not Boolean. A value of true or false is mandatory, and shorthand like <img draggable> is forbidden. The correct usage is <img draggable="false">. MDN
But, if I set it like draggable="false", preact sets it like draggable="true", if I set it like draggable={false} preact sets it like draggable="false". Is this done intentionally?

[JoviDeCroock]

Same answer as #4464 (comment) - you are alluding to the draggable attribute in that quote not to the draggable property.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/draggable vs https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable

[rschristian]

And unfortunately, attribute reflection can be a bit questionable at times. Preact sets the property to "false", and because it's meant to be a boolean, this is truthy and therefore reflected to the attribute as "true".

It's how the DOM works, isn't related to Preact really:

const div = document.createElement('div');
div.draggable = "false";
console.log(div.getAttribute('draggable')); // true

[nihil-pro]

With this and this in mind, it might be helpful to include in the documentation something like this: "Note that only the aria and data attributes are set as attributes. Everything else is set as properties, depending on the type of HtmlElement instance property." What do you think about it?

[rschristian]

I would say that's not very accurate, see:

preact/src/diff/props.js

Lines 107 to 120 in 91679e5

	name != 'width' &&
	name != 'height' &&
	name != 'href' &&
	name != 'list' &&
	name != 'form' &&
	// Default value in browsers is `-1` and an empty string is
	// cast to `0` instead
	name != 'tabIndex' &&
	name != 'download' &&
	name != 'rowSpan' &&
	name != 'colSpan' &&
	name != 'role' &&
	name != 'popover' &&
	name in dom