feat: allow string | Node | (string | Node)[]

demo/HelloWorld.mjs

@@ -13,7 +13,25 @@ export class HelloWorld extends WebComponent {
     const label = this.props.count ? `Clicked ${this.props.count}` : "World";
     const emote = this.props.emotion === "sad" ? ". 😭" : "! 🙌";
 
-    return `<button id="btn">Hello ${label}${emote}</button>`;
+    const button = document.createElement("button");
+    button.innerText = `Hello ${label}${emote}`;
+    const paragraph = document.createElement("p");
+    paragraph.innerText = "Oh what, dynamic DOM?";
+
+    return [button, paragraph, "no way"];
+  }
+
+  render() {
+    if (typeof this.template === "string") {
+      this.innerHTML = this.template;
+    } else if (this.template instanceof Node) {
+      this.replaceChildren(this.template);
+    } else if (
+      Array.isArray(this.template) &&
+      this.template.every((t) => t instanceof Node || typeof t === "string")
+    ) {
+      this.replaceChildren(...this.template);
+    }
   }
 }
 

package.json

@@ -15,7 +15,7 @@
     "pub": "npm run clean && npm run build && cd ./dist && npm publish --access public",
     "publish:patch": "npm version patch && npm run pub",
     "publish:minor": "npm version minor && npm run pub",
-    "check:size": "npm run build && size-limit ./dist/WebComponent.min.js"
+    "check:size": "npm run build && size-limit ./dist/WebComponent.js"
   },
   "repository": "https://git.sr.ht/~ayoayco/web-component-base",
   "homepage": "https://git.sr.ht/~ayoayco/web-component-base#readme",

src/WebComponent.js

@@ -30,7 +30,7 @@ export class WebComponent extends HTMLElement {
 
   /**
    * Read-only string property that represents how the component will be rendered
-   * @returns {string}
+   * @returns {string | Node | (string | Node)[]}
    * @see https://www.npmjs.com/package/web-component-base#template-vs-render
    */
   get template() {
@@ -96,7 +96,7 @@ export class WebComponent extends HTMLElement {
   onChanges(changes) {}
 
   render() {
-    this.innerHTML = this.template;
+    if (typeof this.template === "string") this.innerHTML = this.template;
   }
 
   /**