Digamos que tengo un código esbelto como:
<!-- Widget.svelte --> <div> <slot>No video was provided</slot> </div> <!-- App.svelte --> <Widget> <video id="example"> </video> </Widget> Dentro de Widget.svelte, ¿hay una buena manera de controlar el elemento DOM de video desde la ranura proporcionada por los padres? (Por supuesto que podría pasar un accesorio como videoElementId="example" de App.svelte, y luego hacer un document.getElementById(videoElementId) dentro de Widget.svelte, pero esto funcionaría alrededor de la API de Svelte, en lugar de dentro de ella. )
No conozco una forma integrada de colocar elementos en una ranura, pero podría vincularse a un elemento contenedor y consultar sus elementos secundarios:
<!-- App.svelte --> <script> import Slotted from './Slotted.svelte'; </script> <Slotted> <p> I'm a paragraph </p> </Slotted> <!-- Slotted.svelte --> <script> import { onMount} from 'svelte'; let container; let childContent; onMount(() => { let firstChild = container.children[0]; childContent = firstChild.textContent; }); </script> <p> Child content: {childContent} </p> <div bind:this={container}> <slot></slot> </div>