save file

Author: javascript-2020

html-components/html-components.html

@@ -352,7 +352,7 @@ <h3>
                     </div>
 
 
-                    <div>
+                    <section>
                           <p>
                                 The code for a component, note :
                           </p>
@@ -427,10 +427,10 @@ <h3>
 
                           <code-src src='ex/define-component.js'></code-src>
 
-                    </div>
+                    </section>
 
 
-                    <div>
+                    <section>
                           <p>
                                 A typical component / module lifecycle might have :
                           </p>
@@ -468,10 +468,10 @@ <h3>
                                 Components are also effectively namespaced so they are free to load any other components that they may need without having to
                                 worry that there will ever be a clash of variables or tag names.
                           </p>
-                    </div>
+                    </section>
 
 
-                    <div style='margin-top:50px;margin-bottom:50px'>
+                    <section style='margin-top:50px;margin-bottom:50px'>
 
                           <p>
                                 View the full list of components
@@ -493,10 +493,10 @@ <h3>
                                 </a>
                           </p>
 
-                    </div>
+                    </section>
 
 
-                    <div>
+                    <section>
                           <p>
                                 Here is a very simple component
                           </p>
@@ -505,7 +505,7 @@ <h3>
                                 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>
+                    </section>
 
 
                     <section>
@@ -518,8 +518,17 @@ <h3>
                           </p>
                           <snippet-html id=demo-example-2-sh component src='https://libs.ext-code.com/html/demo/demo-example-2/examples/demo-example.html'></snippet-html>
                           <p>
-                                Here we have to give the component.js library a chance to load and build the component, mod.stack is a list of functions to
-                                when the component.js library has finished initialising.
+                                Here we have to give the component.js library a chance to load and build the component,
+                                <code>
+                                      mod.stack[]
+                                </code>
+                                is an array of functions that get run when the component.js library has finished initialising.
+                          </p>
+                          <p>
+                                The trouble with this approach is that as web pages and components get more complex, they start relyng on co-depencies,
+                                or they require the same resources that can potentially be loaded multiple times.  The standard lifecycle is a way out
+                                of that.  Often the component itself needs to load resources to be able to run, the component.js library provides a
+                                mechanism to ensure that all components on the page are loaded and available.
                           </p>
                     </section>