Merge pull request #205 from paed01/tmp/custom-element-cb

fix custom element connectedCallback

app/assets/public/custom-element.html

@@ -38,6 +38,23 @@ <h2 id="headline">Test custom element</h2>
         <button id="clickme" type="submit">OK</button>
         <button id="resetme" type="reset">Abort</button>
       </waiting-button>
+      <x-greeter>
+        <div class="greeting"></div>
+        <button class="greet" type="button">Greet me</button>
+      </x-greeter>
     </form>
+    <script>
+      class Greeter extends HTMLElement {
+        connectedCallback() {
+          const btn = this.querySelector(".greet");
+          const greeting = this.querySelector(".greeting");
+          btn.addEventListener("click", () => {
+            greeting.innerHTML = "<p>Hello</p>";
+          });
+          greeting.innerHTML = "<p>No greeting yet</p>";
+        }
+      }
+      window.customElements.define("x-greeter", Greeter);
+    </script>
   </body>
 </html>

lib/Document.js

@@ -175,15 +175,24 @@ module.exports = class Document extends Node {
     if ($elm.nodeType) $elm = $($elm);
     if (!$elm.length) return;
 
+    const tag = $elm[0].name;
+
     const loaded = this[loadedSymbol];
-    let mockElement = loaded.find((mockedElm) => mockedElm.$elm[0] === $elm[0]);
+
+    let mockElement = loaded.find((mockedElm) => mockedElm?.$elm[0] === $elm[0]);
+
     if (mockElement) {
       return mockElement;
     }
 
     mockElement = this[kElementFactory].create($elm);
 
     loaded.push(mockElement);
+
+    if (this[kElementFactory].isCustom(tag) && mockElement.connectedCallback) {
+      mockElement.connectedCallback();
+    }
+
     return mockElement;
   }
 };

lib/elementFactory.js

@@ -55,9 +55,7 @@ module.exports = class ElementFactory {
     if (tagName in definitions) return new definitions[tagName](document, $elm);
     const custom = this.custom;
     if (tagName in custom) {
-      const elm = new custom[tagName](document, $elm);
-      if (elm.connectedCallback) elm.connectedCallback();
-      return elm;
+      return new custom[tagName](document, $elm);
     }
 
     return new HTMLElement(document, $elm);
@@ -70,4 +68,8 @@ module.exports = class ElementFactory {
   get(name) {
     return this.custom[name];
   }
+
+  isCustom(name) {
+    return !!this.custom[name];
+  }
 };

test/custom-elements-test.js

@@ -33,4 +33,17 @@ describe("Custom elements", () => {
       page.window.customElements.define("me-button", class Me {});
     }).to.throw(DOMException, "Failed to execute 'define' on 'CustomElementRegistry': the name \"me-button\" has already been used with this registry");
   });
+
+  it("allows custom element to set innerHTML on child", async () => {
+    const page = await browser.navigateTo("/custom-element.html");
+    page.runScripts();
+
+    const greeting = page.document.getElementsByClassName("greeting")[0];
+    expect(greeting.innerHTML).to.equal("<p>No greeting yet</p>");
+
+    const btn = page.document.getElementsByClassName("greet")[0];
+    btn.click();
+
+    expect(greeting.innerHTML).to.equal("<p>Hello</p>");
+  });
 });