Support context from custom element ancestors

[patricknelson]

Stub for an issue originally created by @Vanillabacke, see crisward/svelte-tag#8

Just wanna share a quick and dirty solution of getting the context kinda working.

Needs a new method in the wrapper class:

getAncestorContext( node = false )  {
    while ( node.parentNode ) {
        if ( node._root?.elem?.$$?.context  ) {
            return node._root?.elem?.$$?.context
        }
        node = node.parentNode
    }
    return false
}

And then adopt the context in the opts.component constructor:

connectedCallback(){
    let props = opts.defaults ? opts.defaults : {};

    // ...

    props.$$slots = createSlots(slots)
    this.elem = new opts.component({
        target: this._root,
        context: this.getAncestorContext(this?._root), // add the context to the component
        props
    });
}

Usage for example with a writable: Parent:

<script>
import { setContext} from 'svelte';
import {writable} from 'svelte/store';

const yourName= writable('default name');
setContext('yourName',yourName);
</script>

<div>{$yourName}<div>

Child:

<script>
import { getContext } from 'svelte';
let yourName= getContext('yourName')

updateName(){
    $yourName = 'your new name';
}
</script>

<div>{$yourName}<div>
<button on:click={updateName}>Update the Name</button>

[patricknelson]

Great example of a use case that I’d like to reproduce purely in web component form, where each Svelte component (Tabs, TabList, TabPanel and Tab) have a corresponding custom element in svelte-retag: https://svelte.dev/repl/f2981102a577452a9a6c656680ea8671?version=4.2.0

(thanks to Amir at SO for providing this REPL)

[patricknelson]

Note: Working on this may resolve #12 due to the complexities involving context and rendering the tree from the top down. This is because it may make sense to wait and instead queue component rendering until the next animation frame when we we have enough custom elements initialized (or constructed) to justify traversing the DOM to render in order (to support said context).