En el siguiente código intento asignar <span slot='test-slot'>b</span> a <slot name='test-slot'>a</slot> pero la asignación no funciona. Si traigo <span slot='test-slot'>b</span> fuera de su contenedor principal <div> , la asignación se lleva a cabo como se esperaba.

¿Por qué es esto? ¿Hay alguna forma de asignar elementos anidados con el elemento de slot ? Si no, ¿alguna alternativa? Obviamente, este es un caso de prueba reducido, pero en mi componente web real, es mucho más intuitivo para un usuario agregar un elemento con la etiqueta de slot dentro de otros contenedores.

 <test-element> <div> <span slot='test-slot'>b</span> </div> </test-element> <template id='template-test-element'> <slot name='test-slot'>non slotted content</slot> </template> <script> class TestElement extends HTMLElement { constructor() { let template = document.getElementById("template-test-element") .content.cloneNode(true); // Initialise shadow root and attach table template super() // sets AND return 'this' scope .attachShadow({mode:"open"}) // sets AND returns shadowRoot .append(template); } } customElements.define('test-element', TestElement); </script>