Small issue with v4

[Marcelo Volmaro]

Hi,
After upgrading to V4, I've found a small issue in one of my components. I have the following piece of code as part of the component:

console.log(this.__posterUrl, this.__posterUrl == null);
return html`
<video	ref=${loader}
      poster=${this.__posterUrl}
      playsinline=playsinline
      preload=auto
      muted
      autoplay
      loop
      crossorigin
      disablePictureInPicture
      disableRemotePlayback
      webkit-playsinline=true
      x-webkit-airplay=deny>
          <source type=${`video/${getVideoMime(url)}`} src=${url} />
</video>`;

Everything is almost working but the ´poster´ attribute. If I have a value in __posterUrl of course it works. But if I set it to null, uhtml still adds poster="null" instead of removing it.

Please note that this was working as expected/documented on 3.x.

[Andrea Giammarchi]

if poster is a native video element please use .poster instead but in general any attribute set as null value, or void 0, is removed https://github.com/WebReflection/uhtml/blob/main/esm/handler.js#L103-L107 , and code covered for what it matters.

[Marcelo Volmaro]

Well.. probably my problem is that I expected poster to be treated as an attribute and .poster as a instance property. If not, I'l have to remeber every possible property/attribute pair for every element. I prefer the v3 syntax where you didn't automagically do this.

Wil have to check all my templates as this was not really expected... Thanks anyways, v4 is really better in terms of memory.

[Andrea Giammarchi]

accordingly to MDN poster is a native accessor https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#poster

it's pretty weird if set explicitly as null it's still represented on the DOM ... but th difference from v3 is that in v4 the attribute dance is not around the element, only former standard methods are used such as setAttribute or removeAttribute ... weird if that's not enough (even if not as explicit as in v3)

[Andrea Giammarchi]

to clarify, in v4 .poster or poster makes no difference, so everything should work, the issue here is that poster is a known accessor, and known accessors indeed fall into the same .poster logic https://github.com/WebReflection/uhtml/blob/main/esm/handler.js#L166

which browser are you using for tests?

[Andrea Giammarchi]

OK, from an empty page with just an empty video element I did write $0.post = null and this is the embarrassing result

dear gosh I wasn't expecting this ugly bug from Web standards ... and I am not sure I want to fix it as it's a slippery slope ... although if poster attribute of video element is the only case, I can fix that ...

[Marcelo Volmaro]

Yep. That's exactly my problem. And that's why I would prefer the notion of "I'm accessing an attribute" and "I'm accessing a property" using the attr={value}/.prop={value} syntax and not expect you to "fix" this kind of oddities.

[Andrea Giammarchi]

on a second thought ... when not direct I might indeed just remove the attribute instead ... I will think about it, keeping this as a bug as I think more than that element might suffer (sadly so) the same sort.

[Andrea Giammarchi]

@CheloXL fixed ... this is the current behavior:

• if the attribute is not == null it's directly set if it's a known accessor
• if the attribute is == null it's removed

I hope this works well ... and keep in mind, if the attribute is an empty string, as example, the attribute is still there but empty. This is the most accurate reflection of intents I could think about so I hope we're good now.

[Marcelo Volmaro]

Yes, for me that's perfect. I usually do not coerce things, so that will not be a problem.