Nested/relative routing with Lit elements; sharing information with an entire a subtree

[mgreenbe]

Hi Literati,

I'm trying to transpose my knowledge of client side routing from React to web components and Lit and I'm having trouble mapping some concepts.

Relative/nested routing is a very popular pattern in the React world (React Router v6, Remix-Run, NextJS v13, Tanstack Location) and I'm intereted in developing this kind of approach with Lit. For this to work, link elements need to know where in the tree they are rendered, so they can resolve relative hrefs to absolute ones. To do this resolution, they need to know where in the tree are rendred. In React world, this is accomplished using context -- each route rendering its children inside a Location provider, which makes location information available to the entire subtree. Components in the subtree can access this information via hooks. How might one accomplish this kind of dependency injection in web component/Lit element world?

This is a specific instance of a more general question regarding dependency injection -- making information available to an entire subtree of components -- so general strategies for approaching these issues in the web components and Lit world would be extremely illuminating for me.

Thanks in advance!

[graynorton]

Hi, @mgreenbe! Take a look at @lit-labs/context—sounds like it's what you're looking for.

[mgreenbe]

@LIT-labs, cool. Didn't know about that! (And they have a router project, too 😄. )