Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

get context of next customElement ancestor #8

Open
Vanillabacke opened this issue May 2, 2022 · 3 comments
Open

get context of next customElement ancestor #8

Vanillabacke opened this issue May 2, 2022 · 3 comments

Comments

@Vanillabacke
Copy link

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
Copy link
Contributor

patricknelson commented Oct 3, 2023

Hi @Vanillabacke! Thanks for making this suggestion.

Just wanted to let you know that context support is now available for custom elements in Svelte! Thanks to svelte-retag starting in version 1.3.0 🙂 See demo @ https://svelte-retag.vercel.app/ and implemented in patricknelson/svelte-retag#18

IMHO, this is a huge leap toward bridging the gap between legacy apps (like my site which is a PHP based website) and modern JS component-based front-ends by utilizing a hybrid approach with web components. You keep things composable and continue to populate the data into your front-end by taking a tag-based approach like you might already be doing in other server-side languages like PHP, Ruby, Python, Java and etc. It includes support for light DOM as well as support for slots (something Svelte itself notably doesn't yet support!). I'm so pumped about this last feature because we're going to be using it very heavily in the redesign of our homepage, which will be implemented using Svelte, particularly with the carousels we will be building.

Edit: Accidentally included the actual site copy/pasted from my Slack message 😅 Edited that out since it isn't necessary here.

@Vanillabacke
Copy link
Author

Hi @patricknelson finally I had some time for testing it.
In short I love it! 😅

As far as I've tested it, this gives a huge advantage. Thanks a lot for implementing it! I can see a lot of usecases, especially for small projects, where you just simple reuse alle the stuff easily without heavy scripts ❤️

@patricknelson
Copy link
Contributor

Cool! I'm using it heavily in production myself, so I plan on supporting it long term. If you encounter any issues, you know what to do.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants