svelte
svelte copied to clipboard
Can't I use `let` directives on components used as slots?
Describe the bug
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
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.
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.
This issue has been closed as it is stale and the original author did not follow up with a repro.