[css-regions] Change Appendix A to use custom element layout

Author: astearns

css3-regions/Overview.html

@@ -12,12 +12,12 @@
    rel=dcterms.rights>
   <meta content="CSS Regions Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2012-11-16 name=dcterms.issued>
+  <meta content=2012-11-27 name=dcterms.issued>
   <meta content="Vincent Hardy" name=dcterms.creator>
   <meta content="Alex Mogilevsky" name=dcterms.creator>
   <meta content="Alan Stearns" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
-  <meta content="http://www.w3.org/TR/2012/ED-css3-regions-20121116/"
+  <meta content="http://www.w3.org/TR/2012/ED-css3-regions-20121127/"
    name=dcterms.identifier>
   <link href="../shared/style/default.css" rel=stylesheet type="text/css">
   <script defer=defer
@@ -50,14 +50,14 @@
 
    <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 November
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 November
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2012/ED-css3-regions-20121116/">http://www.w3.org/csswg/css3-regions</a>
+     href="http://www.w3.org/TR/2012/ED-css3-regions-20121127/">http://www.w3.org/csswg/css3-regions</a>
 
     <dt>Latest version:
 
@@ -3225,12 +3225,19 @@ <h2 class=no-num id=intro-example-code>Appendix A. Example Code for
    Introduction</h2>
 
   <p>The following is one possible way to code the example from the <a
-   href="#introduction">introduction</a>. This code uses grid cells to
-   define, size and position the region areas but table layout, absolute
-   positioning, or any other CSS layout facility could be used.
+   href="#introduction">introduction</a>. This code uses grid cells in a
+   custom element to define, size and position the region areas but table
+   layout, absolute positioning, or any other CSS layout facility could be
+   used.
 
   <div class=example>
    <pre>
+
+&lt;head&gt;
+    &lt;title&gt;Regions Intro Example&lt;/title&gt;
+    &lt;link rel="components" href="x-fancy-layout.html"&gt;
+&lt;/head&gt;
+
 &lt;style&gt;
   #grid {
     width: 80vw;
@@ -3272,45 +3279,57 @@ <h2 class=no-num id=intro-example-code>Appendix A. Example Code for
   #region1, #region2, #region3, #region4 {
     <strong>flow-from: article_flow;</strong>
   }
-  
 &lt;/style&gt;
 
 <span
     class=highlight>&lt;!-- 
-     The following code element is the content to flow 
-     through the region chain. 
+     The body element is extended with the 
+     layout template from the link above.
 --&gt;</span>
+&lt;body is="x-fancy-layout"&gt;
 
-&lt;article&gt;
-  &lt;h1&gt;Introduction&lt;/h1&gt;
-  &lt;p&gt;This is an example ...&lt;/p&gt;
-    
-  &lt;h2&gt;More Details&lt;/h2&gt;
-  &lt;p&gt;This illustrates ...&lt;/p&gt;
-  &lt;p&gt;Then, the example ...&lt;/p&gt;
-  &lt;p&gt;Finally, this ...&lt;/p&gt;
-&lt;/article&gt;
+<span
+    class=highlight>&lt;!-- 
+     The article element is the content to flow 
+     through the region chain. In the content 
+     markup, it's followed by the image the 
+     region chain will flow around.
+--&gt;</span>
+  &lt;article&gt;
+    &lt;h1&gt;Introduction&lt;/h1&gt;
+    &lt;p&gt;This is an example ...&lt;/p&gt;
+      
+    &lt;h2&gt;More Details&lt;/h2&gt;
+    &lt;p&gt;This illustrates ...&lt;/p&gt;
+    &lt;p&gt;Then, the example ...&lt;/p&gt;
+    &lt;p&gt;Finally, this ...&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;div id="boxA"&gt;&lt;/div&gt;
+&lt;/body&gt;
 
 <span
     class=highlight>&lt;!--
-     For this example, we layout the regions with a grid.
-     Regions could be pseudo-elements and could be laid out
-     with another layout module (e.g., flexible boxes)
+     In a separate file, we lay out the regions with a grid 
+     inside a custom element template from Web Components.
 --&gt;</span>
-&lt;div id="grid"&gt;
-  &lt;div id="region1"&gt;&lt;/div&gt;
-  &lt;div id="region2"&gt;&lt;/div&gt;
-  &lt;div id="boxA"&gt;&lt;/div&gt;
-  &lt;div id="region3"&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;div id="region4"&gt;&lt;/div&gt;
+&lt;element name="x-fancy-layout" extends="body"&gt;
+  &lt;template&gt;
+    &lt;div id="grid"&gt;
+      &lt;div id="region1"&gt;&lt;/div&gt;
+      &lt;div id="region2"&gt;&lt;/div&gt;
+      &lt;content&gt;&lt;/content&gt;
+      &lt;div id="region3"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="region4"&gt;&lt;/div&gt;
+  &lt;/template&gt;
+&lt;/element&gt;
     </pre>
   </div>
 
   <div class=note><span class=note-prefix>Note </span>
-   <p> Note that a multi-column element is used for #region2, which is a bit
-    gratuitous here (because grid cells could be used). The reason to use a
-    multi-column element is to illustrate that regions can be multi-column.
+   <p> A multi-column element is used for #region2, which is a bit gratuitous
+    here (because grid cells could be used). The reason to use a multi-column
+    element is to illustrate that regions can be multi-column.
   </div>
 
   <h2 class=no-num id=references>References</h2>

css3-regions/Overview.src.html

@@ -2691,12 +2691,18 @@ <h2 id="intro-example-code" class="no-num">Appendix A. Example Code for Introduc
       <p>The following is one possible way 
         to code the example from 
         the <a href="#introduction">introduction</a>.
-        This code uses grid cells 
+        This code uses grid cells in a custom element 
         to define, size and position the region areas 
         but table layout, absolute positioning, 
         or any other CSS layout facility could be used.</p>
 
     <div class="example"><pre>
+
+&lt;head&gt;
+    &lt;title&gt;Regions Intro Example&lt;/title&gt;
+    &lt;link rel="components" href="x-fancy-layout.html"&gt;
+&lt;/head&gt;
+
 &lt;style&gt;
   #grid {
     width: 80vw;
@@ -2736,43 +2742,54 @@ <h2 id="intro-example-code" class="no-num">Appendix A. Example Code for Introduc
   #region1, #region2, #region3, #region4 {
     <strong>flow-from: article_flow;</strong>
   }
-  
 &lt;/style&gt;
 
 <span class="highlight">&lt;!-- 
-     The following code element is the content to flow 
-     through the region chain. 
+     The body element is extended with the 
+     layout template from the link above.
 --&gt;</span>
+&lt;body is="x-fancy-layout"&gt;
 
-&lt;article&gt;
-  &lt;h1&gt;Introduction&lt;/h1&gt;
-  &lt;p&gt;This is an example ...&lt;/p&gt;
-    
-  &lt;h2&gt;More Details&lt;/h2&gt;
-  &lt;p&gt;This illustrates ...&lt;/p&gt;
-  &lt;p&gt;Then, the example ...&lt;/p&gt;
-  &lt;p&gt;Finally, this ...&lt;/p&gt;
-&lt;/article&gt;
+<span class="highlight">&lt;!-- 
+     The article element is the content to flow 
+     through the region chain. In the content 
+     markup, it's followed by the image the 
+     region chain will flow around.
+--&gt;</span>
+  &lt;article&gt;
+    &lt;h1&gt;Introduction&lt;/h1&gt;
+    &lt;p&gt;This is an example ...&lt;/p&gt;
+      
+    &lt;h2&gt;More Details&lt;/h2&gt;
+    &lt;p&gt;This illustrates ...&lt;/p&gt;
+    &lt;p&gt;Then, the example ...&lt;/p&gt;
+    &lt;p&gt;Finally, this ...&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;div id="boxA"&gt;&lt;/div&gt;
+&lt;/body&gt;
 
 <span class="highlight">&lt;!--
-     For this example, we layout the regions with a grid.
-     Regions could be pseudo-elements and could be laid out
-     with another layout module (e.g., flexible boxes)
+     In a separate file, we lay out the regions with a grid 
+     inside a custom element template from Web Components.
 --&gt;</span>
-&lt;div id="grid"&gt;
-  &lt;div id="region1"&gt;&lt;/div&gt;
-  &lt;div id="region2"&gt;&lt;/div&gt;
-  &lt;div id="boxA"&gt;&lt;/div&gt;
-  &lt;div id="region3"&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;div id="region4"&gt;&lt;/div&gt;
+&lt;element name="x-fancy-layout" extends="body"&gt;
+  &lt;template&gt;
+    &lt;div id="grid"&gt;
+      &lt;div id="region1"&gt;&lt;/div&gt;
+      &lt;div id="region2"&gt;&lt;/div&gt;
+      &lt;content&gt;&lt;/content&gt;
+      &lt;div id="region3"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="region4"&gt;&lt;/div&gt;
+  &lt;/template&gt;
+&lt;/element&gt;
     </pre></div>
 
 
 
     <div class="note"><span class="note-prefix">Note </span>
       <p>
-      Note that a multi-column element is used for #region2, 
+      A multi-column element is used for #region2, 
       which is a bit gratuitous here 
       (because grid cells could be used). 
       The reason to use a multi-column element