Merge pull request #181 from github/make-sure-child-decendants-are-upgraded-in-connected-callback

Make sure child decendants are upgraded in connected callback

Author: koddsson

src/core.ts

@@ -8,6 +8,7 @@ const instances = new WeakSet<Element>()
 
 export function initializeInstance(instance: HTMLElement, connect?: (this: HTMLElement) => void): void {
   instance.toggleAttribute('data-catalyst', true)
+  customElements.upgrade(instance)
   instances.add(instance)
   autoShadowRoot(instance)
   initializeAttrs(instance)

test/controller.js

@@ -1,18 +1,29 @@
 import {controller} from '../lib/controller.js'
 
 describe('controller', () => {
+  let root
+
+  beforeEach(() => {
+    root = document.createElement('div')
+    document.body.appendChild(root)
+  })
+
+  afterEach(() => {
+    root.remove()
+  })
+
   it('calls register', async () => {
     class ControllerRegisterElement extends HTMLElement {}
     controller(ControllerRegisterElement)
     const instance = document.createElement('controller-register')
-    document.body.appendChild(instance)
+    root.appendChild(instance)
     expect(instance).to.be.instanceof(ControllerRegisterElement)
   })
 
   it('adds data-catalyst to elements', async () => {
     controller(class ControllerDataAttrElement extends HTMLElement {})
     const instance = document.createElement('controller-data-attr')
-    document.body.appendChild(instance)
+    root.appendChild(instance)
     expect(instance.hasAttribute('data-catalyst')).to.equal(true)
     expect(instance.getAttribute('data-catalyst')).to.equal('')
   })
@@ -29,7 +40,7 @@ describe('controller', () => {
 
     const instance = document.createElement('controller-bind-order')
     chai.spy.on(instance, 'foo')
-    document.body.appendChild(instance)
+    root.appendChild(instance)
 
     const sub = document.createElement('controller-bind-order-sub')
     sub.setAttribute('data-action', 'loaded:controller-bind-order#foo')
@@ -51,7 +62,7 @@ describe('controller', () => {
     )
     const instance = document.createElement('controller-bind-shadow')
     chai.spy.on(instance, 'foo')
-    document.body.appendChild(instance)
+    root.appendChild(instance)
 
     instance.shadowRoot.querySelector('button').click()
 
@@ -67,7 +78,7 @@ describe('controller', () => {
     template.innerHTML = '<button data-action="click:controller-bind-auto-shadow#foo"></button>'
     instance.appendChild(template)
     chai.spy.on(instance, 'foo')
-    document.body.appendChild(instance)
+    root.appendChild(instance)
 
     expect(instance.shadowRoot).to.exist
     expect(instance).to.have.property('shadowRoot').not.equal(null)
@@ -76,4 +87,19 @@ describe('controller', () => {
 
     expect(instance.foo).to.have.been.called(1)
   })
+
+  it('upgrades child decendants when connected', () => {
+    controller(class ChildElementElement extends HTMLElement {})
+    controller(
+      class ParentElementElement extends HTMLElement {
+        connectedCallback() {
+          const child = this.querySelector('child-element')
+          expect(child.matches(':defined')).to.equal(true)
+        }
+      }
+    )
+
+    // eslint-disable-next-line github/unescaped-html-literal
+    root.innerHTML = '<parent-element><child-element></child-element></parent-element>'
+  })
 })