feat(bind): support binding shadowDOM elements

Author: keithamus

src/bind.ts

@@ -6,6 +6,10 @@ const controllers = new Set<string>()
  */
 export function bind(controller: HTMLElement): void {
   controllers.add(controller.tagName.toLowerCase())
+  if (controller.shadowRoot) {
+    bindElements(controller.shadowRoot)
+    listenForBind(controller.shadowRoot)
+  }
   bindElements(controller)
 }
 
@@ -48,12 +52,12 @@ interface Subscription {
   unsubscribe(): void
 }
 
-function bindElements(root: Element) {
+function bindElements(root: Element | ShadowRoot) {
   for (const el of root.querySelectorAll('[data-action]')) {
     bindActions(el)
   }
   // Also bind the controller to itself
-  if (root.hasAttribute('data-action')) {
+  if (root instanceof Element && root.hasAttribute('data-action')) {
     bindActions(root)
   }
 }
@@ -63,10 +67,18 @@ function handleEvent(event: Event) {
   const el = event.currentTarget as Element
   for (const binding of bindings(el)) {
     if (event.type === binding.type && controllers.has(binding.tag)) {
-      const controller = el.closest(binding.tag) as Element & Record<string, (ev: Event) => unknown>
+      type EventDispatcher = Element & Record<string, (ev: Event) => unknown>
+      const controller = el.closest(binding.tag) as EventDispatcher
       if (controller && typeof controller[binding.method] === 'function') {
         controller[binding.method](event)
       }
+      const root = el.getRootNode()
+      if (root instanceof ShadowRoot && root.host.matches(binding.tag)) {
+        const shadowController = root.host as EventDispatcher
+        if (typeof shadowController[binding.method] === 'function') {
+          shadowController[binding.method](event)
+        }
+      }
     }
   }
 }

test/bind.js

@@ -138,6 +138,45 @@ describe('bind', () => {
     expect(instance.foo).to.have.been.called.exactly(2)
   })
 
+  it('can bind elements within the shadowDOM', () => {
+    const instance = document.createElement('bind-test-element')
+    chai.spy.on(instance, 'foo')
+    instance.attachShadow({mode: 'open'})
+    const el1 = document.createElement('div')
+    const el2 = document.createElement('div')
+    el1.setAttribute('data-action', 'click:bind-test-element#foo')
+    el2.setAttribute('data-action', 'submit:bind-test-element#foo')
+    instance.shadowRoot.append(el1, el2)
+    bind(instance)
+    expect(instance.foo).to.have.not.been.called()
+    el1.click()
+    expect(instance.foo).to.have.been.called.exactly(1)
+    el2.dispatchEvent(new CustomEvent('submit'))
+    expect(instance.foo).to.have.been.called.exactly(2)
+  })
+
+  it('binds elements added to shadowDOM', async () => {
+    const instance = document.createElement('bind-test-element')
+    chai.spy.on(instance, 'foo')
+    instance.attachShadow({mode: 'open'})
+    const el1 = document.createElement('div')
+    const el2 = document.createElement('div')
+    el1.setAttribute('data-action', 'click:bind-test-element#foo')
+    el2.setAttribute('data-action', 'submit:bind-test-element#foo')
+    bind(instance)
+    instance.shadowRoot.append(el1)
+    instance.shadowRoot.append(el2)
+    // We need to wait for a couple of frames after injecting the HTML into to
+    // controller so that the actions have been bound to the controller.
+    await waitForNextAnimationFrame()
+    await waitForNextAnimationFrame()
+    expect(instance.foo).to.have.not.been.called()
+    el1.click()
+    expect(instance.foo).to.have.been.called.exactly(1)
+    el2.dispatchEvent(new CustomEvent('submit'))
+    expect(instance.foo).to.have.been.called.exactly(2)
+  })
+
   describe('listenForBind', () => {
     it('re-binds actions that are denoted by HTML that is dynamically injected into the controller', async function () {
       const instance = document.createElement('bind-test-element')