New utility function to add or replace a template instance

Author: karesztrk

jsr.json

@@ -1,6 +1,6 @@
 {
   "name": "@karesztrk/webcomponent-base",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "exports": {
     ".": "./src/index.js"
   }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@karesztrk/webcomponent-base",
   "repository": "https://github.com/karesztrk/webcomponent-base",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "",
   "type": "module",
   "types": "./types/index.d.ts",

src/LightElement.js

@@ -73,6 +73,22 @@ class LightElement extends HTMLElement {
     const names = Object.getOwnPropertyNames(o);
     return names.includes(/** @type {string} */ (name));
   }
+
+  /**
+   * Given a selector, if the target element exists, it will be replace its children with the template instance.
+   * If the target element doesn't exist, the template will be appended as a new child.
+   * @param {string} selector
+   * @param {HTMLElement} template
+   * @returns {void}
+   */
+  addTemplate(selector, template) {
+    const target = this.querySelector(selector);
+    if (target) {
+      target.replaceChildren(...template.children);
+    } else {
+      this.appendChild(template);
+    }
+  }
 }
 
 export default LightElement;

types/index.d.ts

@@ -21,6 +21,11 @@ declare module '@karesztrk/webcomponent-base' {
 		getTemplate(id: string): Node | undefined;
 
 		isOwnProperty(name: unknown): boolean;
+		/**
+		 * Given a selector, if the target element exists, it will be replace its children with the template instance.
+		 * If the target element doesn't exist, the template will be appended as a new child.
+		 * */
+		addTemplate(selector: string, template: HTMLElement): void;
 	}
 	export default ShadowElement;
 	/**