[select] <selectedcontent> does not work with dynamic dom

[kbrilla]

When trying to use <selectedoption> with Angular there is a problem. Because of dynamic nature of dom creation in Angular <selectedoption> and <option>s are created dynamicly which can lead to situations that <selectedoption> is created before option and currently <selectedoption> won't clone <option>. This is also problem when <option>s are dynamic.

Original thread in Angular repo: angular/angular#60636
StackBlitz showing the issue: https://stackblitz.com/edit/angular-19-starter-bszk44yd?file=src%2Fmain.ts

[lukewarlow]

Angular/the web author will probably have to manually clone the option into selectedcontent in first render in that case.

Though there's probably more Angular can do to provide fully dynamic updating behaviour if that's what they want for their users.

[lukewarlow]

To provide some context: The current behaviour of the selectedcontent element it went through a bit of iteration. Originally it did clone option contents every time they changed and would have "just worked" for the above case.

However after some extensive discussion it was decided to change this to only set it once the option finishes parsing, when selectedcontent is inserted into the DOM or when the option that's selected is changed.

See https://jakearchibald.com/2024/how-should-selectedoption-work/ for an initial blog that sparked discussion.

A long related discussion in whatwg/html#10520, as well as various issues in the OpenUI repository.

Just providing these as they potentially help clarify the reasoning for the current behaviour. Though there's no objective correct answer here.

[lukewarlow]

Cc @josepharhar just in case there's anything I'm missing but I think this is as intended and Angular will have to update to handle this due to how their DOM is constructed. There's various mechanisms for triggering the clone but I'm not familiar enough with Angular to know which one is most appropriate.

[josepharhar]

Thanks Luke, you didn't miss anything. At first I was quite resistant to changing <selectedcontent> from cloning during any mutation to only during changing options, but after I tested it in React and it ended up just working I was OK with it.

It might not be a bad idea for Angular to manually do a clone during its initial render or whenever it modifies the contents of the currently selected <option>.