El elemento html necesita elementos secundarios. La selección en sí no es realmente útil a menos que existan los elementos de opción. Quiero estar haciendo lo mismo.
Si creo un componente web y se ve así
<my-select> <my-option> one </my-option> <my-option> two </my-option> <my-option> three </my-option> </my-select>Mi objetivo en general aquí es que las etiquetas de opciones no deben colocarse en una ranura . Son necesarios para definir datos para representar la selección. Entonces, como mínimo, deberían moverse al DOM de la sombra. Pero eso parece algo incorrecto.
Otro ejemplo de este tipo de cosas sería y
Ok, aquí hay un ejemplo concreto. Dado el marcado anterior, el componente web my-select en realidad creará un DOM de sombra y en su lugar representará un. Entonces, my-select necesita mirar todos los elementos dentro de él y crear un
Entonces, ¿cómo diablos hago eso? Debo estar perdiendo algo, ¿verdad?
<my-select> <my-option> one </my-option> <my-option> two </my-option> <my-option> three </my-option> </my-select>Si ha adjuntado un shadowDOM y desea mover este lightDOM a shadowDOM , puede usar:
connectedCallback(){ setTimeout(()=>{ this.shadowRoot.append(...this.children); } } Se requiere setTimeout porque la devolución de llamada connectedCallback se activa en la etiqueta de apertura , el lightDOM en ese momento aún no se analiza.
Debe esperar a que se analice todo lightDOM, setTimeout se asegura de ejecutar el código en la primera oportunidad (cuando el bucle de eventos está vacío).
Para obtener detalles sobre el bucle de eventos, consulte: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif