The html element needs child elements. The select itself isn't really useful unless there are the option elements. I want to be doing to same thing.
If I create a web component and it looks like this
<my-select>
<my-option> one </my-option>
<my-option> two </my-option>
<my-option> three </my-option>
</my-select>
My aim in general here is that the option tags shouldn't be put in a slot. They are needed to define data for rendering the select. So at the very least they would need to be moved into the shadow DOM. But that seems like the wrong thing to do.
Another example of this sort of thing would be and
Ok here is a concrete example. Given the markup above, the my-select web component will actually create a shadow DOM and render a instead. So the my-select needs to look at all the elements inside it and create an
So how the heck do I do that? I must be missing something right?
<my-select>
<my-option> one </my-option>
<my-option> two </my-option>
<my-option> three </my-option>
</my-select>
If you have attached a shadowDOM and you want to move this lightDOM to shadowDOM you can use:
connectedCallback(){
setTimeout(()=>{
this.shadowRoot.append(...this.children);
}
}
The setTimeout is required because the connectedCallback fires on the opening tag, the lightDOM at that time is not parsed yet.
You have to wait for all lightDOM to be parsed, setTimeout makes sure you execute the code at the first opportunity (when the Event Loop is empty).
For Event Loop details see: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif