Connect Stimulus Controller inside a Shadow DOM


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

1 Like