Блог

Допустим, у меня есть стройный код, такой как:

 <!-- Widget.svelte -->
<div>
    <slot>No video was provided</slot>
</div>

<!-- App.svelte -->
<Widget>
    <video id="example">
    </video>
</Widget>
 

В Widget.svelte есть ли хороший способ для меня получить представление об элементе video DOM из слота, предоставленного родителями? (Конечно, я мог бы передать реквизит, например videoElementId="example" , из App.svelte, а затем создать document.getElementById(videoElementId) внутренний виджет.svelte-но это будет работать вокруг API Svelte, а не внутри него.)

Я не знаю встроенного способа размещения элементов в слоте, но вы можете привязаться к элементу контейнера и запросить его дочерние элементы:

 <!-- 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>