Connect Stimulus Controller inside a Shadow DOM

1

Hi,

I’m attempting to encapsulate a Stimulus controller within a WebComponent.
Everything works fine when the node is in the document’s DOM, but if I try to isolate it by placing it inside a shadow DOM, the controller suddenly does not connect anymore.
I also can’t wrap the node with the controller, because in this case, it can’t access the node from the controller.

How can I instruct Stimulus to discover controllers in a custom HTMLElement?

mybe i could manually register the controller in the connected callback of web component

connectedCallback() {
   window.Stimulus = Application.start()
   Stimulus.register('ui--custom-component', CustomComponentController);

does not work, ii suppose again because of shadow DOM
Thanks.

2 Likes
2

Did you end finding a solution for this?
I’m having the same issue where Stimulus doesn’t register any controller and i guess is because it can’t read inside of the Shadow DOM to find any elements.

3

Unfortunately no, i ended up not using WebComponent with ShadowDOM.
Anyway, I was just experimenting with that.

4

I found the solution and wrote a quick blog post explaining how it works.

I hope this helps to anyone in the future as I found it really interesting.

1 Like