fix: ensure shadowRoot is bound after connectedcallback

This adds a test and ensures bind is called on shadowroots created after
custom `connectedCallback` behavior.

Co-authored-by: Kristján Oddsson <koddsson@gmail.com>

Author: keithamus

src/bind.ts

@@ -6,14 +6,16 @@ const controllers = new WeakSet<Element>()
  */
 export function bind(controller: HTMLElement): void {
   controllers.add(controller)
-  if (controller.shadowRoot) {
-    bindElements(controller.shadowRoot)
-    listenForBind(controller.shadowRoot)
-  }
+  if (controller.shadowRoot) bindShadow(controller.shadowRoot)
   bindElements(controller)
   listenForBind(controller.ownerDocument)
 }
 
+export function bindShadow(root: ShadowRoot): void {
+  bindElements(root)
+  listenForBind(root)
+}
+
 const observers = new WeakMap<Node, Subscription>()
 /**
  * Set up observer that will make sure any actions that are dynamically

src/controller.ts

@@ -1,5 +1,5 @@
 import {register} from './register.js'
-import {bind} from './bind.js'
+import {bind, bindShadow} from './bind.js'
 import {autoShadowRoot} from './auto-shadow-root.js'
 import {defineObservedAttributes, initializeAttrs} from './attr.js'
 import type {CustomElement} from './custom-element.js'
@@ -18,6 +18,7 @@ export function controller(classObject: CustomElement): void {
     initializeAttrs(this)
     bind(this)
     if (connect) connect.call(this)
+    if (this.shadowRoot) bindShadow(this.shadowRoot)
   }
   defineObservedAttributes(classObject)
   register(classObject)

test/controller.js

@@ -37,4 +37,24 @@ describe('controller', () => {
 
     expect(instance.foo).to.have.been.called(1)
   })
+
+  it('binds shadowRoots after connectedCallback behaviour', async () => {
+    controller(
+      class ControllerBindShadowElement extends HTMLElement {
+        connectedCallback() {
+          this.attachShadow({mode: 'open'})
+          const button = document.createElement('button')
+          button.setAttribute('data-action', 'click:controller-bind-shadow#foo')
+          this.shadowRoot.appendChild(button)
+        }
+      }
+    )
+    const instance = document.createElement('controller-bind-shadow')
+    chai.spy.on(instance, 'foo')
+    document.body.appendChild(instance)
+
+    instance.shadowRoot.querySelector('button').click()
+
+    expect(instance.foo).to.have.been.called(1)
+  })
 })