How can I create ReactiveController standlone instance If web component used in recursive

[jitendraP-ashutec]

I am creating web component like tree, so that web component is used recursively, I want to maintain status which node is selected if use expand any level of node. One of idea is we can use ReactiveController to maintain state, but Its create each instance for each node, do you have any suggestion how we can do that ?

and I have bind keyboard event to expand and close node in each node using ReactiveController controller but if I Open 3rd level tree item then keyboard event called 3 times, I have remove listeners but still its called 3 times. any suggestion on it ?

[Christian24]

I am not 100% certain I understand what you mean, but it sounds like a slot would be more what you need: https://lit.dev/docs/components/shadow-dom/#slots

[jitendraP-ashutec]

@Christian24 , Let me try to explain it other way.

Let say I want create tree, so tree may have recursive use Like:

`

  <wb-tree>

       <wb-tree>

       </wb-tree>
   </web-tree>

`

Now in wb-tree component I want create standalone service like controller, which keep information about which wb-tree was opened or other information and share to all info to all wb tree component

[Christian24]

This sounds a bit like @lit-labs/context would be useful to you. Otherwise maybe you can just use shadowRoot.parentElement?

[jitendraP-ashutec]

Ok

[e111077]

Heya, there are many approaches to this, but it seems like there are solutions out there for you that may already solve this like @lit-labs/context or a state manager like lit-mobx, redux + a reactive controller, etc.

If you want an example of how to implement something like this, here is an example of a controller for the redux state manager:

https://lit.dev/playground/#gist=b7e3c1e58657a3b130521f17b1a15af2

The concepts are there and you can likely swap out redux for another solution or a custom solution