save file

Author: javascript-2020

html-components/html-components.html

@@ -62,6 +62,9 @@
               mod.base.add({ext,$,datatype,keydown,menu,menumod,ace});
 
 
+              await mod.auto('demo-example-1');
+              
+              
               hdr                     = mod['html-components-hdr'];
               log                     = mod['log-mod'];
 
@@ -71,7 +74,6 @@
               ex['web-editor-demo']   = mod['web-editor-demo'];
 
 
-              
               hdr.initmod({ext,$,menu,log});
               log.initmod({ext,$});
 
@@ -243,13 +245,13 @@ <h4>
 
 
                           <h4>
-                                the [component] attribute
+                                the [ component ] attribute
                           </h4>
 
                           <p>
-                                after that any elements with a
+                                any elements with a
                                 <b>
-                                      [component]
+                                      [ component ]
                                 </b>
                                 attribute will be treated as a web component module
                           </p>
@@ -350,32 +352,7 @@ <h3>
                     </div>
 
 
-                    <div style='margin-top:50px;margin-bottom:50px'>
-                    
-                          <p>
-                                view the full list of components
-                                <br>
-                                <a href='html-components-list/html-components-list.html'>
-                                      html component list
-                                </a>
-                          </p>
-                          
-                          <p>
-                                view the
-                                <b>
-                                      component.js
-                                </b>
-                                library documentation and api
-                                <br>
-                                <a href='component-library/component-library.html'>
-                                      component library
-                                </a>
-                          </p>
-                          
-                    </div>
-                    
-                    
-                    <div style='display:block;margin-top:100px'>
+                    <div>
                           <p>
                                 the code for a component, note
                           </p>
@@ -443,16 +420,19 @@ <h3>
 
                           </ul>
 
-                          <web-editor id=ex2 component fullsize src='https://libs.ext-code.com/html/log-mod/log-mod.html'></web-editor>
+                          
+                          <p>
+                                Skeletal function definition
+                          </p>
+                          
+                          <code-src src='ex/define-component.js'></code-src>
 
                     </div>
 
 
-                    
-                    
                     <div>
                           <p>
-                                a component / module typically has a standard lifecycle that is
+                                a typical component / module lifecycle might be
                           </p>
 
                           <ul>
@@ -490,6 +470,45 @@ <h3>
                           </p>
                     </div>
 
+                    
+                    <div style='margin-top:50px;margin-bottom:50px'>
+                    
+                          <p>
+                                view the full list of components
+                                <br>
+                                <a href='html-components-list/html-components-list.html'>
+                                      html component list
+                                </a>
+                          </p>
+                          
+                          <p>
+                                view the
+                                <b>
+                                      component.js
+                                </b>
+                                library documentation and api
+                                <br>
+                                <a href='component-library/component-library.html'>
+                                      component library
+                                </a>
+                          </p>
+                          
+                    </div>
+                    
+                    
+                    <div>
+                          <p>
+                                here is a very simple component
+                          </p>
+                          <web-editor id=ex2 component fullsize mode=html src='https://libs.ext-code.com/html/demo/demo-example/demo-example.html'></web-editor>
+                          <p>
+                                and the code to include it
+                          </p>
+                          <snippet-html id=demo-example-1 component src='https://libs.ext-code.com/html/demo/demo-example/examples/demo-example-1.html'></snippet-html>
+                    </div>
+                    
+                    
+                    
                     <div>
                           <p>
                                 the component library just needs to be included as a script tag, it exposes a global property mod,