svelte icon indicating copy to clipboard operation
svelte copied to clipboard

Can't I use `let` directives on components used as slots?

Open JeHwanYoo opened this issue 1 year ago • 2 comments

Describe the bug

Screen-Shot-2022-07-16-at-2-30-54-PM.png

I have confirmed that the let directive works at the top.

However, using the let directive in a slot doesn't seem to work.

May I know the reason?

Reproduction

my sources

OlMap.svelte

<script lang="ts">
    import { onMount } from 'svelte'
    import { Map } from 'ol'

    export let style: string

    let target: HTMLDivElement
    let map: Map

    onMount(() => {
        map = new Map({ target })
    })
</script>

<div bind:this={target} {style} />

<slot name="view" {map} />
<slot name="tile" {map} />

OlTileLayer.svelte

<script lang="ts">
    import { Map } from 'ol'
    import TileLayer from 'ol/layer/Tile'
    import type { Options } from 'ol/layer/Layer'

    export let map: Map
    export let tileLayerOptions: Options = {}

    let layer = new TileLayer(tileLayerOptions)

    $: {
        map?.addLayer(layer)
    }
</script>

<slot name="source" {layer} />

OlXYZ.svelte

<script lang="ts">
    import type { Options } from 'ol/source/XYZ'
    import { XYZ } from 'ol/source'
    import type { Layer } from 'ol/layer'

    export let layer: Layer
    export let sourceOptions: Options = {}

    $: {
        layer?.setSource(new XYZ(sourceOptions))
    }
</script>

Logs

No response

System Info

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
    Memory: 141.91 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.14.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Safari: 15.5

Severity

annoyance

JeHwanYoo avatar Jul 16 '22 05:07 JeHwanYoo

is it possible to create a repro in https://svelte.dev/repl ?

the code snippets you pasted has nothing in resemblance with the issue you are trying to describe with the image.

tanhauhau avatar Jul 17 '22 15:07 tanhauhau

This issue was happen also to me in my development. I think that the reason for the trouble is that using let in a nested component which is also a named slot makes a bit ambiguity - is this the variable of the named slot, or perhaps the variable of the parent component main slot?

I thought that because of this ambiguity Svelte isn't nice in these situations. I thought (and still think) that the "Svelte way" to handle this is to put your nested component inside a <svelte:fragment slot="..."> block, this will solve your issue.

Tal500 avatar Jul 26 '22 08:07 Tal500

This issue has been closed as it is stale and the original author did not follow up with a repro.

tanhauhau avatar Sep 12 '22 04:09 tanhauhau