template-demo.html updated

sashafirsov · Mar 15, 2021 · de7b8ca · de7b8ca
1 parent 34aa074
commit de7b8ca
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -27,10 +27,10 @@ <h1> slotted-element demo </h1>
     </slotted-element>
 </html-demo-element>
 
-<html-demo-element>
+<html-demo-element title="Content would be placed inside of 'loaded' slot ">
     <slotted-element src="embedded.html">
         <fieldset>
-            <legend> Content would be placed inside </legend>
+            <legend> Slots located in wrapper </legend>
             <p slot="loading" hidden> Loading... ⏳ </p>
             <p slot="error" hidden> What could be wrong? </p>
             <p slot="loaded" hidden> Replaced with content of <b>embedded.html</b> </p>
@@ -47,13 +47,8 @@ <h1> slotted-element demo </h1>
     </slotted-element>
 </html-demo-element>
 
-<html-demo-element>
-    <slotted-element src="dwarfs.json">
-        <fieldset>
-            <legend> array <b>dwarfs.json</b> as table </legend>
-            <p slot="loaded" hidden>  </p>
-        </fieldset>
-    </slotted-element>
+<html-demo-element title="array dwarfs.json as table">
+    <slotted-element src="dwarfs.json"></slotted-element>
 </html-demo-element>
 
 <script type="module" src="https://unpkg.com/[email protected]/html-demo-element.js"></script>

diff --git a/demo/render-from-json.html b/demo/render-from-json.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>render from json - FetchElement</title>
+    <title>render table from json - FetchElement</title>
     <script type="module" src="https://unpkg.com/[email protected]/html-demo-element.js"></script>
 </head>
 <body>
-<h1> slotted-element demo </h1>
+<h1> fetch-element render from JSON demo </h1>
 <a href="https://github.com/sashafirsov/slotted-element"><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg">git</a> |
 <a href="index.html"> slotted-element demo </a>
 

diff --git a/demo/template-demo.html b/demo/template-demo.html
@@ -11,7 +11,7 @@
 </head>
 <body>
 
-<h1> slotted-element demo </h1>
+<h1> slotted-element with template demo </h1>
 <a href="https://github.com/sashafirsov/slotted-element"><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg">git</a> |
 <a href="index.html"> slotted-element demo </a>
 <p>
@@ -26,7 +26,7 @@ <h6>inline HTML with slots 🎉</h6>
 
 <html-demo-element title="2. Template defined by ID">
     <template id="template-with-slots">
-        <h6>inline HTML with slots 🥳</h6>
+        <h6>template HTML with slots 🥳</h6>
         <slot name="slot0" hidden>
             Slots are hidden in template when "hidden" attribute is set.
             Could be shown by slotsAdd() method.

diff --git a/slotted-element.js b/slotted-element.js
@@ -14,11 +14,10 @@ SlottedElement extends FetchElement
     {
         if( name !== 'template')
             return super.attributeChangedCallback( name, oldValue, newValue );
-        if( this.template !== newValue )
-        {
-            this[ name ] = newValue;
-        }
+        this.template = newValue;
+        this.initialized && this.slotsInit();
     }
+
     fetch( url, options )
     {
         this.slotOnly('loading')
@@ -41,7 +40,7 @@ SlottedElement extends FetchElement
 
     slotsInit()
     {
-        if( !this.slots || this.children.length )
+        if( !this.slots )
         {
             this.slots = {};
             for( let node of this.querySelectorAll( '[slot]' ) )
@@ -58,12 +57,12 @@ SlottedElement extends FetchElement
                 t = createNode('template',"innerHTML", this.template).content;
             this.innerHTML='';
             this.appendChild( t.cloneNode(true))
-        }
-        for( let s of this.querySelectorAll( 'slot' ) )
-        {   let slot = this.slots[ s.name ];
-            if( slot )
-            {   s.hidden = !0;
-                s.parentNode.insertBefore( slot.cloneNode( true ), s );
+            for( let s of this.querySelectorAll( 'slot' ) )
+            {   let slot = this.slots[ s.name ];
+                if( slot )
+                {   s.hidden = !0;
+                    s.parentNode.insertBefore( slot.cloneNode( true ), s );
+                }
             }
         }
     }