How to properly pass an attribute from parent custom element to child custom element?


<svelte:options tag="parent-custom-element" />

  import ChildCustomElement from "./ChildCustomElement.svelte";
  let greeting = "Hello";

<child-custom-element greeting="{greeting}"></child-custom-element>


<svelte:options tag="child-custom-element" />

  export let greeting;
  /* within the script scope "greeting" is undefined */

<!-- within the template scope "greeting" is defined ("hello") -->

What I need is access to the attribute value within the script scope to do some magic and only after that load the template. How to do this?

>Solution :

You probably can use onMount like this:

  import { onMount } from 'svelte';

  export let greeting;

  let initialized = false;
  onMount(() => {
    // [use greeting for whatever]

    initialized = true;

{#if initialized}

Leave a Reply