I have an app that simply hides content `Hidden.svelte`:

```
<script>
    export let shown = false;
</script>

<svelte:options accessors={true}/>

{#if shown}
    <slot/>
{/if}

```

Everything works fine in parent `App.svelte`:

```
<script>
    import Hidden from 'Hidden';

    let child;
</script>

<Hidden bind:this={child}>
    Content
</Hidden>

<button on:click={() => child.shown = true}>Show</button>

```

---

But, although I can do this `on:click={child.shown = true}`, I can not do this:

```
{#if child.shown}
    External message!
{/if}

```

Obviously, I also can not do this:

```
<div class:shown={child.shown}>Child component is shown</div>

```

---

I guess, thats all because it renders before mounting, but all my attempts playing with `onMount` and `$:` failed

Could it be achieved somehow? Thx

**EDIT**

Sorry, everyone, I've tried to make as simple example as possible, and made one that does not reflect my initial problem at all, but, however, technically got the right answer

So, the problem was, that parent `App.svelte` did not reflect `child.shown` changes that was made directly inside `Hidden.svelte`

@ThomasHennes suggested to use stores to solve that, but, if I got it right, it is good approach for single app instances, so, for those who are interested, I ended up with regular events:

<https://svelte.dev/repl/f467fe36446444f09a2a7633b1faa6a1?version=3.20.1>

**EDIT 2**

Real problem solved in accepted answer