diff --git a/demo/HelloWorld.mjs b/demo/HelloWorld.mjs index 6483f72..e8f6d2f 100644 --- a/demo/HelloWorld.mjs +++ b/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 ``; + 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); + } } } diff --git a/package.json b/package.json index f7d1db3..f477628 100644 --- a/package.json +++ b/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", diff --git a/src/WebComponent.js b/src/WebComponent.js index 123a9cb..ae38244 100644 --- a/src/WebComponent.js +++ b/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; } /**