Use template for loading-on-demand of content in SPAPage. #62

Padax · Aug 29, 2021 · 7c2dc2c · 7c2dc2c
1 parent 20023b9
commit 7c2dc2c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -58,12 +58,14 @@
   <w-radio disabled>Un-Checked Disabled</w-radio>
   <w-radio checked disabled>Checked Disabled</w-radio>
 	<w-spa-page path="/heading">
-		<w-display-heading level="1" underlined>LONG LIVE W-COMPONENTS!</w-display-heading>
-		<w-display-heading level="2">LONG LIVE W-COMPONENTS!</w-display-heading>
-		<w-display-heading level="3">LONG LIVE W-COMPONENTS!</w-display-heading>
-		<w-display-heading level="4">LONG LIVE W-COMPONENTS!</w-display-heading>
-		<w-display-heading>LONG LIVE W-COMPONENTS!</w-display-heading>
-		<w-display-heading level="6">LONG LIVE W-COMPONENTS!</w-display-heading>
+		<template>
+			<w-display-heading level="1" underlined>LONG LIVE W-COMPONENTS!</w-display-heading>
+			<w-display-heading level="2">LONG LIVE W-COMPONENTS!</w-display-heading>
+			<w-display-heading level="3">LONG LIVE W-COMPONENTS!</w-display-heading>
+			<w-display-heading level="4">LONG LIVE W-COMPONENTS!</w-display-heading>
+			<w-display-heading>LONG LIVE W-COMPONENTS!</w-display-heading>
+			<w-display-heading level="6">LONG LIVE W-COMPONENTS!</w-display-heading>
+		</template>
 	</w-spa-page>
 	<w-spa-page path="/main">
 		<w-heading level="1" underlined>Main Content</w-heading>

diff --git a/wc/components/spa/SPAPage.js b/wc/components/spa/SPAPage.js
@@ -47,6 +47,11 @@ class SPAPage extends WComponent{
       className:this.current?"show":"hide"
     };
     if(this.root){
+      const template=this.querySelector("template");
+      if(template!==null){
+        this.appendChild(template.content.cloneNode(true));
+        template.remove();
+      }
       DOM.modify(this.root, {props: props});
     }else{
       this.root=DOM.create("slot", {props: props}, this.shadowRoot);