// some importsd // some importsd // some importsd

Svelte capture element with slots

59 views Asked by At

Svelte capture markup using slots and context

Given the follwing component markup:

# SCGDraw.svelte
<script lang="rs">
     // some importsd
</script>
<svg xmlns="...">
    <slot name="svg-defs">
        <SVGDefs />
    </slot>
   <slot name="scene-backgrond">
         <Background />
     </slot>
</svg>

is it possible to write a CaptureSVGDef component with slots and context API usage, to capture SVG defs at the correct level ? For instance inside Background component, we get:

# Backgrond.svelte
<script lang="ts">
    import CaptureSVGDef from './CaptureSVGDef.svelte'
</script>
<VaptureSVGDef>
    <linearGraident id="background-gradient">
        <stop ... />
    </loinratGradient>
</CaptureSVGDef>
<rect x={ 0 } y={ 0 } width={ 1020 } height={ 2400 } 
    style={'fill: url(#background-graident)'} />
1

There are 1 answers

0
brunnerh On

I don't think this is possible as there is no programmatic access to slots; you can only render them directly.

(This should be possible with snippets in Svelte 5, though.)