From faa4809559541433eeb53374045d3e9ad956b888 Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Sat, 6 Jun 2015 18:07:19 -0700
Subject: [PATCH 01/13] Upgrade to Polymer 1.0.

---
 bower.json                  |   6 +-
 clause.html                 |  76 ++++++++-------
 codeblock.html              |  25 ++---
 definition-section.html     |  27 +++---
 definition-section.js       |  41 +++++---
 figure.html                 |  14 +--
 footnote.html               |  22 ++---
 foreign-index.html          |  14 +--
 foreign-index.js            |  13 ++-
 foreword.html               |   5 +-
 framework.html              |   7 +-
 function.html               | 184 ++++++++++++++----------------------
 include.js                  |  31 +++---
 promise-0.1.1.min.js        |   1 -
 publish.html                |  16 ++--
 publish.js                  |  20 +++-
 ref.html                    |  27 +++---
 ref.js                      |  62 ++++++++++--
 section.html                |  28 +++---
 section.js                  |  56 ++++++++---
 table.html                  |  67 ++++++-------
 titlepage.html              | 142 +++++++++++++---------------
 titlepage.js                | 128 +++++++++++++++----------
 toc.html                    |  67 +++++++------
 toc.js                      |  52 +++++++---
 util/get-element-by-id.html |  29 ++++--
 26 files changed, 662 insertions(+), 498 deletions(-)
 delete mode 100644 promise-0.1.1.min.js

diff --git a/bower.json b/bower.json
index 084edd0..17e45c9 100644
--- a/bower.json
+++ b/bower.json
@@ -10,7 +10,9 @@
     "tests"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#0.5.2",
-    "core-ajax": "Polymer/core-ajax#0.5.2"
+    "polymer": "Polymer/polymer#^1.0.0",
+    "iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
+    "promise-polyfill": "PolymerLabs/promise-polyfill#^1.0.0",
+    "fetch": "github/fetch#^0.9.0"
   }
 }
diff --git a/clause.html b/clause.html
index 3fa7e8d..6880ff4 100644
--- a/clause.html
+++ b/clause.html
@@ -13,38 +13,46 @@
 limitations under the License.
 -->
 
-<polymer-element name="cxx-clause" extends="cxx-section">
-  <script>
-    (function() {
-      function updateTocClauses() {
-        this.super();
-        var toc = document.querySelector('cxx-toc');
-        if (toc) {
-          toc.updateClauses();
-        }
+<script>
+  (function() {
+    // Clauses have the same template as sections, but Polymer doesn't yet give
+    // us a simple way to declare that. This clones the cxx-section definition
+    // to make a cxx-clause definition.
+    var sectionModule = Polymer.DomModule.import('cxx-section');
+    var clauseModule = sectionModule.cloneNode(/*deep=*/true);
+    clauseModule.id = 'cxx-clause';
+    sectionModule.parentNode.insertBefore(clauseModule, sectionModule.nextSibling);
+
+    function updateTocClauses() {
+      var toc = document.querySelector('cxx-toc');
+      if (toc) {
+        toc.updateClauses();
       }
-      Polymer('cxx-clause', {
-
-        // Convenience function at the clause level, which gets called
-        // from <cxx-toc>. If the clause is explicitly numbered, then
-        // this sets the clause_num to that value. Otherwise, the clause
-        // number is set to the argument clause_num. This returns
-        // 1 + the value set.
-        //
-        // Note that this will recursively set the section numbers for
-        // this clause.
-        set_clause_num: function(clause_num) {
-          // If the author explicitly specified the clause number, don't
-          // use a different number.
-          if (this.number)
-            clause_num = Number(this.number)
-          this.update_sec_nums(clause_num);
-          return clause_num + 1;
-        },
-
-        domReady: updateTocClauses,
-        detached: updateTocClauses,
-      });
-    })();
-  </script>
-</polymer-element>
+    }
+    Polymer({
+      is: 'cxx-clause',
+
+      behaviors: [CxxSectionBehavior],
+
+      // Convenience function at the clause level, which gets called
+      // from <cxx-toc>. If the clause is explicitly numbered, then
+      // this sets the clause_num to that value. Otherwise, the clause
+      // number is set to the argument clause_num. This returns
+      // 1 + the value set.
+      //
+      // Note that this will recursively set the section numbers for
+      // this clause.
+      set_clause_num: function(clause_num) {
+        // If the author explicitly specified the clause number, don't
+        // use a different number.
+        if (this.number)
+          clause_num = Number(this.number)
+        this.update_sec_nums(clause_num);
+        return clause_num + 1;
+      },
+
+      attached: updateTocClauses,
+      detached: updateTocClauses,
+    });
+  })();
+</script>
diff --git a/codeblock.html b/codeblock.html
index d07533b..25a55ff 100644
--- a/codeblock.html
+++ b/codeblock.html
@@ -25,22 +25,25 @@
   TODO: This could call into a syntax highlighter that styles
   comments correctly.
 -->
-<polymer-element name="cxx-codeblock">
+<dom-module name="cxx-codeblock">
+  <style>
+    :host { display: block; }
+  </style>
   <template>
-    <style>
-      :host { display: block; }
-    </style>
     <pre><code><content></content></code></pre>
   </template>
   <script>
-    Polymer('cxx-codeblock', {
+    Polymer({
+      is: 'cxx-codeblock',
+
       attached: function() {
-        if (this.firstChild.nodeType == Node.TEXT_NODE)
-          this.firstChild.nodeValue = this.firstChild.nodeValue.replace(/^\s+/, '');
-        if (this.lastChild.nodeType == Node.TEXT_NODE)
-          this.lastChild.nodeValue = this.lastChild.nodeValue.replace(/\s+$/, '');
+        var first = Polymer.dom(this).firstChild;
+        if (first.nodeType == Node.TEXT_NODE)
+          first.nodeValue = first.nodeValue.replace(/^\s+/, '');
+        var last = Polymer.dom(this).lastChild;
+        if (last.nodeType == Node.TEXT_NODE)
+          last.nodeValue = last.nodeValue.replace(/\s+$/, '');
       }
     });
   </script>
-</polymer-element>
-
+</dom-module>
diff --git a/definition-section.html b/definition-section.html
index a08dfcc..0b4ccfc 100644
--- a/definition-section.html
+++ b/definition-section.html
@@ -18,22 +18,19 @@
     and definitions" section that gets numbered as if each term is a section,
     but doesn't make them show up in the table of contents.
 -->
-<polymer-element name="cxx-definition-section" extends="dl">
+<dom-module id="cxx-definition-section">
+  <style>
+    :host > ::content dt { font-weight: bold; }
+    :host > ::content dd { margin-left: 0; }
+  </style>
+  <template><content></content></template>
+</dom-module>
+<dom-module id="cxx-definition-section-term">
   <template>
-    <style>
-      polyfill-next-selector { content: 'dt'; }
-      ::content dt { font-weight: bold; }
-      polyfill-next-selector { content: 'dd'; }
-      ::content dd { margin-left: 0; }
-    </style>
-
-    <content></content>
-  </template>
-  <template id="cxx-definition-section-term" bind="">
-    {{parent_section.sec_num}}.{{term_number}}
-    <span style="float:right"><a href="#{{id}}">[{{id}}]</a></span>
+    <span>{{joinWithDots(parent_section.sec_num, term_number)}}</span>
+    <span style="float:right"><a href="{{prependHash(id)}}">{{surroundWithBrackets(id)}}</a></span>
     <br clear="both"/>
     <content></content>
   </template>
-  <script src="definition-section.js"></script>
-</polymer-element>
+</dom-module>
+<script src="definition-section.js"></script>
diff --git a/definition-section.js b/definition-section.js
index e56dc3f..0fe4eb1 100644
--- a/definition-section.js
+++ b/definition-section.js
@@ -17,16 +17,33 @@ limitations under the License.
     // Record the document that this element is declared in, so we can
     // pull the <dt> template out of it.
     // The condition handles the HTML Imports polyfill:
-    // http://www.polymer-project.org/platform/html-imports.html#other-notes
+    // http://webcomponents.org/polyfills/html-imports/#other-notes
     var importDocument = document._currentScript
         ? document._currentScript.ownerDocument
         : document.currentScript.ownerDocument;
 
-    Polymer('cxx-definition-section', {
+    var CxxDefinitionSectionTerm = Polymer({
+        is: 'cxx-definition-section-term',
+        extends: 'dt',
+
+        joinWithDots: function() {
+            return Array.prototype.join.call(arguments, '.');
+        },
+        prependHash: function(value) {
+            return '#' + value;
+        },
+        surroundWithBrackets: function(value) {
+            return '[' + value + ']';
+        },
+    });
+    Polymer({
+        is: 'cxx-definition-section',
+        extends: 'dl',
+
         ready: function() {
-            var parent_section = this.parentElement;
+            var parent_section = Polymer.dom(this).parentNode;
             while (parent_section && parent_section.tagName != 'CXX-SECTION')
-                parent_section = parent_section.parentElement;
+                parent_section = Polymer.dom(parent_section).parentNode;
             if (!parent_section) {
                 console.error('cxx-definition-section', this,
                               'must be a descendent of a <cxx-section> element.');
@@ -34,20 +51,20 @@ limitations under the License.
             }
 
             var next_term_number = 1;
-            for (var dt = this.firstElementChild; dt;
-                 dt = dt.nextElementSibling) {
+            for (var dt = Polymer.dom(this).firstElementChild; dt;
+                 dt = Polymer.dom(dt).nextSibling) {
                 if (dt.tagName != 'DT')
                     continue;
 
+                var oldDt = dt;
+                dt = new CxxDefinitionSectionTerm();
+                dt.id = oldDt.id;
                 dt.parent_section = parent_section;
                 dt.term_number = next_term_number++;
+                Polymer.dom(dt).innerHTML = Polymer.dom(oldDt).innerHTML;
 
-                var template = importDocument.getElementById(
-                    'cxx-definition-section-term').cloneNode(true);
-                template.removeAttribute('id');
-                template.model = dt;
-
-                dt.createShadowRoot().appendChild(template);
+                Polymer.dom(this).insertBefore(dt, oldDt);
+                Polymer.dom(this).removeChild(oldDt);
             }
         }
     });
diff --git a/figure.html b/figure.html
index 3d2dafb..ec58e7b 100644
--- a/figure.html
+++ b/figure.html
@@ -17,13 +17,12 @@
     Uses the HTML <figure> content model, but automatically adds a number to
     the <figcaption>.
 -->
-<polymer-element name="cxx-figure" constructor="CxxFigureElement">
+<dom-module name="cxx-figure">
   <template>
     <style>
       :host { margin-left: auto; margin-right: auto; }
       figcaption { white-space: nowrap; text-align: center; }
-      polyfill-next-selector { content: 'figcaption figcaption' }
-      ::content figcaption { display: inline; }
+      figcaption > ::content figcaption { display: inline; }
 
     </style>
     <figure>
@@ -34,14 +33,15 @@
   <script>
     (function() {
       function renumberFigures() {
-        document.querySelectorAll('cxx-figure').array().forEach(function(figure, index) {
+        Polymer.dom(document).querySelectorAll('cxx-figure').forEach(function(figure, index) {
           figure.figure_num = index + 1;
         });
       }
-      Polymer('cxx-figure', {
-        domReady: renumberFigures,
+      window.CxxFigureElement = Polymer({
+        is: 'cxx-figure',
+        attached: renumberFigures,
         detached: renumberFigures,
       });
     })();
   </script>
-</polymer-element>
+</dom-module>
diff --git a/footnote.html b/footnote.html
index 5d99677..b98353a 100644
--- a/footnote.html
+++ b/footnote.html
@@ -13,33 +13,33 @@
 limitations under the License.
 -->
 
-<polymer-element name="cxx-footnote">
-  <template><style>
+<dom-module id="cxx-footnote">
+  <style>
     :host { font-family: serif; white-space: normal;
-            text-indent: initial; }
+      text-indent: initial; }
     @media screen {
       aside { float: right; max-width: 30%;
-              margin-left: 1em; }
+        margin-left: 1em; }
     }
     @media print {
       sup, .marker { display: none; }
       aside { float: footnote; }
     }
-  </style><!--
-    Be sure not to introduce whitespace here, as it appears around the footnote.
-  --><sup id="footnote-call-{{foot_num}}"><a href="#footnote-body-{{foot_num}}">{{foot_num}}</a></sup><aside class="footnote" id="footnote-body-{{foot_num}}"><span class="marker"><a href="#footnote-call-{{foot_num}}">{{foot_num}}</a>) </span><content/></aside></template>
+  </style>
+  <template><sup id="footnote-call-{{foot_num}}"><a href="#footnote-body-{{foot_num}}">{{foot_num}}</a></sup><aside class="footnote" id="footnote-body-{{foot_num}}"><span class="marker"><a href="#footnote-call-{{foot_num}}">{{foot_num}}</a>) </span><content/></aside></template>
 
   <script>
     (function() {
       function renumberFootnotes() {
-        document.querySelectorAll('cxx-footnote').array().forEach(function(footnote, index) {
+        Polymer.dom(document).querySelectorAll('cxx-footnote').forEach(function(footnote, index) {
           footnote.foot_num = index + 1;
         });
       }
-      Polymer('cxx-footnote', {
-        domReady: renumberFootnotes,
+      Polymer({
+        is: 'cxx-footnote',
+        attached: renumberFootnotes,
         detached: renumberFootnotes,
       });
     })();
   </script>
-</polymer-element>
+</dom-module>
diff --git a/foreign-index.html b/foreign-index.html
index 7dfe4d4..e4391b6 100644
--- a/foreign-index.html
+++ b/foreign-index.html
@@ -20,15 +20,15 @@
 -->
 
 <link rel="import"
-      href="../core-ajax/core-ajax.html">
-<polymer-element name="cxx-foreign-index" attributes="src name">
+      href="../iron-ajax/iron-ajax.html">
+<dom-module name="cxx-foreign-index" attributes="src name">
+  <style> :host {display: none} </style>
   <template>
-    <style> :host {display: none} </style>
-    <core-ajax auto=""
+    <iron-ajax auto
                   url="{{src}}"
                   handleAs="json"
-                  on-core-response="{{attachIndex}}">
-    </core-ajax>
+                  on-response="attachIndex">
+    </iron-ajax>
   </template>
   <script src="foreign-index.js"></script>
-</polymer-element>
+</dom-module>
diff --git a/foreign-index.js b/foreign-index.js
index 8372327..d556dbd 100644
--- a/foreign-index.js
+++ b/foreign-index.js
@@ -13,7 +13,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-Polymer('cxx-foreign-index', {
+Polymer({
+    is: 'cxx-foreign-index',
+
+    properties: {
+        src: {
+            type: String,
+        },
+        name: {
+            type: String,
+        },
+    },
+
     attachIndex: function(e) {
         this.index = e.detail.response;
         if (typeof(this.index) != 'object') {
diff --git a/foreword.html b/foreword.html
index 18ec0b0..5008e3e 100644
--- a/foreword.html
+++ b/foreword.html
@@ -16,7 +16,7 @@
 <!--
 This element is empty and auto-generates the necessary content.
 -->
-<polymer-element name="cxx-foreword">
+<dom-module name="cxx-foreword">
   <template>
     <style>
       :host { display: block; min-height: 100%; }
@@ -79,7 +79,8 @@ <h1>Foreword</h1>
   </template>
   <script>
     Polymer({
+      is: 'cxx-foreword',
       title: "Foreword",
     });
   </script>
-</polymer-element>
+</dom-module>
diff --git a/framework.html b/framework.html
index 0e24d92..656e215 100644
--- a/framework.html
+++ b/framework.html
@@ -13,10 +13,15 @@
 limitations under the License.
 -->
 
+<script>
+  window.Polymer = window.Polymer || {};
+  window.Polymer.dom = 'shady';
+</script>
 <link rel="stylesheet" href="base.css" shim-shadowdom/>
-<script src="promise-0.1.1.min.js"></script>
 <!-- "../" selects the bower_components directory if this project was
 itself installed through bower. -->
+<link rel="import" href="../promise-polyfill/promise-polyfill-lite.html"></link>
+<script src="../fetch/fetch.js"></script>
 <link rel="import" href="../polymer/polymer.html"/>
 <link rel="import" href="function.html"/>
 <link rel="import" href="section.html"/>
diff --git a/function.html b/function.html
index 62dc629..620dd40 100644
--- a/function.html
+++ b/function.html
@@ -13,44 +13,56 @@
 limitations under the License.
 -->
 
-<polymer-element name="cxx-function" constructor="CxxFunctionElement" noscript>
+<dom-module id="cxx-function">
+  <style>
+    :host { display: block; page-break-inside: avoid;}
+    :host:not(:last-child) { margin-bottom: 3ex; }
+    :host > dl { margin: 0; margin-left: 2em; }
+    :host > pre { margin: 0; }
+  </style>
   <template>
-    <style>
-      :host { display: block; page-break-inside: avoid;}
-      :host:not(:last-child) { margin-bottom: 3ex; }
-      :host > dl { margin: 0; margin-left: 2em; }
-      :host > pre { margin: 0; }
-    </style>
     <pre><code><content select="cxx-signature"></content></code></pre>
 
     <dl>
       <content></content>
     </dl>
   </template>
-</polymer-element>
-<polymer-element name="cxx-signature" noscript>
-  <template><style>
-      :host {padding-left: 2em;display:block;text-indent:-2em;}
-      :host(.formatted) {padding-left: 0m; text-indent:0;}
-    </style><content></content></template>
-</polymer-element>
-<polymer-element name="cxx-attribute" constructor="CxxFunctionAttributeElement">
-  <template>
+</dom-module>
+<script>window.CxxFunctionElement = Polymer({is: 'cxx-function'});</script>
+<dom-module id="cxx-signature">
+  <style>
+    :host {padding-left: 2em;display:block;text-indent:-2em;}
+    :host(.formatted) {padding-left: 0m; text-indent:0;}
+  </style>
+  <template><content></content></template>
+  <script>Polymer({is: 'cxx-signature'});</script>
+</dom-module>
+
+<template id="cxx-attribute-template">
+  <dom-module>
     <style>
       :host {display:block; margin-top: .5em; margin-bottom: .5em;}
       dt { float: left; font-style: italic; font-weight: normal; padding-right: 1ex;}
       dd { margin-left: 0em; }
-      polyfill-next-selector { content: 'dd > ul, dd > ol' }
-      ::content > ul, ::content > ol { clear: left; }
+      dd > ::content > ul, dd > ::content > ol { clear: left; }
     </style>
-    <dt>{{heading}}:</dt><dd><content></content></dd>
-  </template>
-  <script>
-    Polymer('cxx-attribute', {
+    <template>
+      <dt>{{appendColon(heading)}}</dt><dd><content></content></dd>
+    </template>
+  </dom-module>
+</template>
+<script>
+  (function() {
+    var script = document._currentScript || document.currentScript;
+    var cxxAttributeTemplate = Polymer.dom(script.ownerDocument).querySelector('#cxx-attribute-template');
+    var cxxAttributeModule = Polymer.dom(cxxAttributeTemplate.content).firstElementChild;
+    var CxxFunctionAttributeBehavior = {
+      isCxxFunctionAttribute: true,
+
       attached: function() {
-        var parent = this.parentNode;
+        var parent = Polymer.dom(this).parentNode;
         while (parent instanceof HTMLModElement)
-          parent = parent.parentNode;
+          parent = Polymer.dom(parent).parentNode;
         if (!(parent instanceof CxxFunctionElement)) {
           console.warn('<' + this.localName +
                        '> element must be a child of <cxx-function> ' +
@@ -58,91 +70,39 @@
                        this)
         }
       },
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-requires" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-requires', {
-      heading: 'Requires',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-preconditions" extends="cxx-attribute">
-  <!-- This extension was introduced by N3916. -->
-  <script>
-    Polymer('cxx-preconditions', {
-      heading: 'Preconditions',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-effects" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-effects', {
-      heading: 'Effects',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-synchronization" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-synchronization', {
-      heading: 'Synchronization',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-postconditions" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-postconditions', {
-      heading: 'Postconditions',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-returns" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-returns', {
-      heading: 'Returns',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-throws" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-throws', {
-      heading: 'Throws',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-complexity" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-complexity', {
-      heading: 'Complexity',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-exception-safety" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-exception-safety', {
-      heading: 'Exception safety',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-remarks" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-remarks', {
-      heading: 'Remarks',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-error-conditions" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-error-conditions', {
-      heading: 'Error conditions',
-    });
-  </script>
-</polymer-element>
-<polymer-element name="cxx-notes" extends="cxx-attribute">
-  <script>
-    Polymer('cxx-notes', {
-      heading: 'Notes',
-    });
-  </script>
-</polymer-element>
+
+      appendColon: function(heading) {
+        return heading + ':';
+      },
+    };
+
+    function registerFunctionAttribute(elementName, heading) {
+      var domModule = document.importNode(cxxAttributeModule, /*deep=*/true);
+      domModule.id = elementName;
+      Polymer.dom(Polymer.dom(cxxAttributeTemplate).parentNode).insertBefore(
+        domModule, Polymer.dom(cxxAttributeTemplate).nextSibling);
+      Polymer({
+        is: elementName,
+        behaviors: [CxxFunctionAttributeBehavior],
+        properties: {
+          heading: {
+            type: String,
+            value: heading
+          }
+        }
+      });
+    };
+    registerFunctionAttribute('cxx-requires', 'Requires');
+    registerFunctionAttribute('cxx-preconditions', 'Preconditions');
+    registerFunctionAttribute('cxx-effects', 'Effects');
+    registerFunctionAttribute('cxx-synchronization', 'Synchronization');
+    registerFunctionAttribute('cxx-postconditions', 'Postconditions');
+    registerFunctionAttribute('cxx-returns', 'Returns');
+    registerFunctionAttribute('cxx-throws', 'Throws');
+    registerFunctionAttribute('cxx-complexity', 'Complexity');
+    registerFunctionAttribute('cxx-exception-safety', 'Exception safety');
+    registerFunctionAttribute('cxx-remarks', 'Remarks');
+    registerFunctionAttribute('cxx-error-conditions', 'Error conditions');
+    registerFunctionAttribute('cxx-notes', 'Notes');
+  })();
+</script>
diff --git a/include.js b/include.js
index e8e280b..e5c2117 100644
--- a/include.js
+++ b/include.js
@@ -21,23 +21,20 @@ limitations under the License.
     "use strict";
     var includeProto = Object.create(HTMLElement.prototype);
     includeProto.attachedCallback = function() {
-        this.link = document.createElement('link');
-        this.link.setAttribute('rel', 'import');
-        this.link.setAttribute('href', this.getAttribute('href'));
-        this.link.onload = this.loaded.bind(this);
-        this.link.onerror = function(e) {
-            console.error(e);
-        }
-        document.head.appendChild(this.link);
-    };
-    includeProto.loaded = function(e) {
-        var imported = this.link.import;
-        this.link.parentNode.removeChild(this.link);
-        var parent = this.parentNode;
-        for (var elem = imported.body.firstChild; elem; elem = elem.nextSibling) {
-            parent.insertBefore(elem.cloneNode(true), this);
-        }
-        parent.removeChild(this);
+        var self = this;
+        fetch(this.getAttribute('href'))
+            .then(function(response) { return response.text(); })
+            .then(function(text) {
+                var parent = Polymer.dom(self).parentNode;
+                var div = document.createElement('div');
+                div.innerHTML = text;
+                var nextSibling;
+                for (var elem = Polymer.dom(div).firstChild; elem; elem = nextSibling) {
+                    nextSibling = Polymer.dom(elem).nextSibling;
+                    Polymer.dom(parent).insertBefore(elem, self);
+                }
+                Polymer.dom(parent).removeChild(self);
+            });
     };
     document.registerElement('cxx-include', {prototype: includeProto});
 })();
diff --git a/promise-0.1.1.min.js b/promise-0.1.1.min.js
deleted file mode 100644
index 89569ba..0000000
--- a/promise-0.1.1.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var a,b,c,d;!function(){var e={},f={};a=function(a,b,c){e[a]={deps:b,callback:c}},d=c=b=function(a){function c(b){if("."!==b.charAt(0))return b;for(var c=b.split("/"),d=a.split("/").slice(0,-1),e=0,f=c.length;f>e;e++){var g=c[e];if(".."===g)d.pop();else{if("."===g)continue;d.push(g)}}return d.join("/")}if(d._eak_seen=e,f[a])return f[a];if(f[a]={},!e[a])throw new Error("Could not find module "+a);for(var g,h=e[a],i=h.deps,j=h.callback,k=[],l=0,m=i.length;m>l;l++)"exports"===i[l]?k.push(g={}):k.push(b(c(i[l])));var n=j.apply(this,k);return f[a]=g||n}}(),a("promise/all",["./utils","exports"],function(a,b){"use strict";function c(a){var b=this;if(!d(a))throw new TypeError("You must pass an array to all.");return new b(function(b,c){function d(a){return function(b){f(a,b)}}function f(a,c){h[a]=c,0===--i&&b(h)}var g,h=[],i=a.length;0===i&&b([]);for(var j=0;j<a.length;j++)g=a[j],g&&e(g.then)?g.then(d(j),c):f(j,g)})}var d=a.isArray,e=a.isFunction;b.all=c}),a("promise/asap",["exports"],function(a){"use strict";function b(){return function(){process.nextTick(e)}}function c(){var a=0,b=new i(e),c=document.createTextNode("");return b.observe(c,{characterData:!0}),function(){c.data=a=++a%2}}function d(){return function(){j.setTimeout(e,1)}}function e(){for(var a=0;a<k.length;a++){var b=k[a],c=b[0],d=b[1];c(d)}k=[]}function f(a,b){var c=k.push([a,b]);1===c&&g()}var g,h="undefined"!=typeof window?window:{},i=h.MutationObserver||h.WebKitMutationObserver,j="undefined"!=typeof global?global:this,k=[];g="undefined"!=typeof process&&"[object process]"==={}.toString.call(process)?b():i?c():d(),a.asap=f}),a("promise/cast",["exports"],function(a){"use strict";function b(a){if(a&&"object"==typeof a&&a.constructor===this)return a;var b=this;return new b(function(b){b(a)})}a.cast=b}),a("promise/config",["exports"],function(a){"use strict";function b(a,b){return 2!==arguments.length?c[a]:(c[a]=b,void 0)}var c={instrument:!1};a.config=c,a.configure=b}),a("promise/polyfill",["./promise","./utils","exports"],function(a,b,c){"use strict";function d(){var a="Promise"in window&&"cast"in window.Promise&&"resolve"in window.Promise&&"reject"in window.Promise&&"all"in window.Promise&&"race"in window.Promise&&function(){var a;return new window.Promise(function(b){a=b}),f(a)}();a||(window.Promise=e)}var e=a.Promise,f=b.isFunction;c.polyfill=d}),a("promise/promise",["./config","./utils","./cast","./all","./race","./resolve","./reject","./asap","exports"],function(a,b,c,d,e,f,g,h,i){"use strict";function j(a){if(!w(a))throw new TypeError("You must pass a resolver function as the first argument to the promise constructor");if(!(this instanceof j))throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");this._subscribers=[],k(a,this)}function k(a,b){function c(a){p(b,a)}function d(a){r(b,a)}try{a(c,d)}catch(e){d(e)}}function l(a,b,c,d){var e,f,g,h,i=w(c);if(i)try{e=c(d),g=!0}catch(j){h=!0,f=j}else e=d,g=!0;o(b,e)||(i&&g?p(b,e):h?r(b,f):a===F?p(b,e):a===G&&r(b,e))}function m(a,b,c,d){var e=a._subscribers,f=e.length;e[f]=b,e[f+F]=c,e[f+G]=d}function n(a,b){for(var c,d,e=a._subscribers,f=a._detail,g=0;g<e.length;g+=3)c=e[g],d=e[g+b],l(b,c,d,f);a._subscribers=null}function o(a,b){var c,d=null;try{if(a===b)throw new TypeError("A promises callback cannot return that same promise.");if(v(b)&&(d=b.then,w(d)))return d.call(b,function(d){return c?!0:(c=!0,b!==d?p(a,d):q(a,d),void 0)},function(b){return c?!0:(c=!0,r(a,b),void 0)}),!0}catch(e){return c?!0:(r(a,e),!0)}return!1}function p(a,b){a===b?q(a,b):o(a,b)||q(a,b)}function q(a,b){a._state===D&&(a._state=E,a._detail=b,u.async(s,a))}function r(a,b){a._state===D&&(a._state=E,a._detail=b,u.async(t,a))}function s(a){n(a,a._state=F)}function t(a){n(a,a._state=G)}var u=a.config,v=(a.configure,b.objectOrFunction),w=b.isFunction,x=(b.now,c.cast),y=d.all,z=e.race,A=f.resolve,B=g.reject,C=h.asap;u.async=C;var D=void 0,E=0,F=1,G=2;j.prototype={constructor:j,_state:void 0,_detail:void 0,_subscribers:void 0,then:function(a,b){var c=this,d=new this.constructor(function(){});if(this._state){var e=arguments;u.async(function(){l(c._state,d,e[c._state-1],c._detail)})}else m(this,d,a,b);return d},"catch":function(a){return this.then(null,a)}},j.all=y,j.cast=x,j.race=z,j.resolve=A,j.reject=B,i.Promise=j}),a("promise/race",["./utils","exports"],function(a,b){"use strict";function c(a){var b=this;if(!d(a))throw new TypeError("You must pass an array to race.");return new b(function(b,c){for(var d,e=0;e<a.length;e++)d=a[e],d&&"function"==typeof d.then?d.then(b,c):b(d)})}var d=a.isArray;b.race=c}),a("promise/reject",["exports"],function(a){"use strict";function b(a){var b=this;return new b(function(b,c){c(a)})}a.reject=b}),a("promise/resolve",["exports"],function(a){"use strict";function b(a){var b=this;return new b(function(b){b(a)})}a.resolve=b}),a("promise/utils",["exports"],function(a){"use strict";function b(a){return c(a)||"object"==typeof a&&null!==a}function c(a){return"function"==typeof a}function d(a){return"[object Array]"===Object.prototype.toString.call(a)}var e=Date.now||function(){return(new Date).getTime()};a.objectOrFunction=b,a.isFunction=c,a.isArray=d,a.now=e}),b("promise/polyfill").polyfill()}();
\ No newline at end of file
diff --git a/publish.html b/publish.html
index 8d0662a..e89b106 100644
--- a/publish.html
+++ b/publish.html
@@ -22,15 +22,15 @@
      If the 'source' attribute is present, a "Sources at ..." comment
      will appear at the top of the result document.
 -->
-<polymer-element name="cxx-publish-button" attributes="source">
+<dom-module id="cxx-publish-button">
+  <style>
+    :host {display: block;}
+  </style>
   <template>
-    <style>
-      :host {display: block;}
-    </style>
-    <template if="{{ !flattenedBlob }}">
-      <button on-click="{{publish}}" disabled?="{{ publishing }}">Publish</button>
+    <template is="dom-if" if="{{ !flattenedBlob }}">
+      <button on-tap="publish" disabled$="{{ publishing }}">Publish</button>
     </template>
-    <template if="{{ flattenedBlob }}">
+    <template is="dom-if" if="{{ flattenedBlob }}">
       <p>Published:</p>
       <ul>
         <li><a href="{{ flattenedBlob }}">Flattened document</a></li>
@@ -39,4 +39,4 @@
     </template>
   </template>
   <script src="publish.js"></script>
-</polymer-element>
+</dom-module>
diff --git a/publish.js b/publish.js
index 74eb0cb..284026a 100644
--- a/publish.js
+++ b/publish.js
@@ -76,7 +76,7 @@ limitations under the License.
     // Replaces <caption>s inside <caption>s with <spans>, so that Firefox doesn't
     // omit them from the rendering.
     function fixNestedCaptions(doc) {
-        doc.querySelectorAll('caption caption').array().forEach(function(caption) {
+        doc.querySelectorAll('caption caption').forEach(function(caption) {
             var span = doc.createElement('span');
             span.innerHTML = caption.innerHTML;
             caption.parentNode.insertBefore(span, caption);
@@ -155,9 +155,21 @@ limitations under the License.
         return result;
     }
 
-    Polymer('cxx-publish-button', {
-        publishing: false,
-        flattenedBlob: null,
+    Polymer({
+        is: 'cxx-publish-button',
+
+        properties: {
+            source: String,
+            publishing: {
+                type: Boolean,
+                value: false,
+            },
+            flattenedBlob: {
+                type: String,
+                value: null,
+            },
+        },
+
         publish: function() {
             if (this.publishing) {
                 return;
diff --git a/ref.html b/ref.html
index bbb0abd..fdf8b8f 100644
--- a/ref.html
+++ b/ref.html
@@ -27,19 +27,20 @@
     in that document.
 -->
 
-<polymer-element name="cxx-ref" attributes="to insynopsis in">
+<dom-module name="cxx-ref">
   <template
-      ><cxx-get-element-by-id elemId="{{in}}" elem="{{inElem}}"></cxx-get-element-by-id
-      ><template if="{{!in}}"><cxx-get-element-by-id elemId="{{to}}" elem="{{toElem}}"></cxx-get-element-by-id></template
-      ><template id="target_num"
-                 ><template if="{{inElem.index}}">{{inElem.name}} <span title="{{to}}">&#xa7;{{inElem.index[to]}}</span></template
-                 ><template if="{{!in}}"><a title="{{to}}" href="#{{to}}"
-                   ><template if="{{toElem.sec_num}}">{{toElem.sec_num}}</template
-                   ><template if="{{toElem.table_num}}">Table {{toElem.table_num}}</template
-                   ><template if="{{toElem.figure_num}}">Figure {{toElem.figure_num}}</template></a></template
-      ></template
-      ><template if="{{insynopsis}}">// <i><template bind="" ref="target_num"></template>, {{toElem.title_element.textContent}}</i></template
-      ><template if="{{!insynopsis}}"><template bind="" ref="target_num"></template></template
+    ><cxx-get-element-by-id elemId="{{in}}" elem="{{inElem}}"></cxx-get-element-by-id
+    ><template is="dom-if" if="{{!in}}"><cxx-get-element-by-id elemId="{{to}}" elem="{{toElem}}"></cxx-get-element-by-id></template
+
+    ><template is="dom-if" if="{{insynopsis}}">// <i
+      ><template is="dom-if" if="{{inElem.index}}"><span>{{inElem.name}}</span> <span title="{{to}}">{{foreignSectionNumber}}</span></template
+      ><template is="dom-if" if="{{!in}}"><a title="{{to}}" href="{{prependHash(to)}}">{{targetNumber}}</a></template
+      >{{synopsisLabel}}</i></template
+
+    ><template is="dom-if" if="{{!insynopsis}}"
+      ><template is="dom-if" if="{{inElem.index}}"><span>{{inElem.name}}</span> <span title="{{to}}">{{foreignSectionNumber}}</span></template
+      ><template is="dom-if" if="{{!in}}"><a title="{{to}}" href="{{prependHash(to)}}">{{targetNumber}}</a></template
+    ></template
   ></template>
   <script src="ref.js"></script>
-</polymer-element>
+</dom-module>
diff --git a/ref.js b/ref.js
index 462a444..63dc768 100644
--- a/ref.js
+++ b/ref.js
@@ -14,14 +14,47 @@ limitations under the License.
 */
 
 (function() {
-    Polymer('cxx-ref', {
-        to: "",
-        insynopsis: false,
+    Polymer({
+        is: 'cxx-ref',
 
-        observe: {
-            'inElem.index': 'indexChanged'
+        properties: {
+            to: {
+                type: String,
+                value: "",
+            },
+            toElem: {
+                type: Object,
+                observer: 'toElemChanged',
+            },
+            in: {
+                type: String,
+            },
+            inElem: {
+                type: Object,
+                observer: 'inElemChanged',
+            },
+            insynopsis: {
+                type: Boolean,
+                value: false,
+            },
+            targetNumber: {
+                type: String,
+                computed: 'computeTargetNumber(toElem.sec_num, toElem.table_num, toElem.figure_num)',
+            },
+            foreignSectionNumber: {
+                type: String,
+                computed: 'computeForeignSectionNumber(inElem.index, to)',
+            },
+            synopsisLabel: {
+                type: String,
+                computed: 'computeSynopsisLabel(toElem.title_element.textContent)',
+            },
         },
 
+        observers: [
+            'indexChanged(inElem.index)'
+        ],
+
         checkInvariants: function() {
             if (this.in) {
                 if (!this.inElem) {
@@ -62,11 +95,26 @@ limitations under the License.
             }
         },
 
+        computeTargetNumber: function(sec_num, table_num, figure_num) {
+            return sec_num || table_num || figure_num;
+        },
+
+        computeForeignSectionNumber: function(foreignIndex, to) {
+            return '\u00A7' + foreignIndex[to];
+        },
+
+        computeSynopsisLabel: function(targetTitle) {
+            return ', ' + targetTitle;
+        },
+
+        prependHash: function(value) {
+            return '#' + value;
+        },
+
         indexChanged: function() {
-            if (!(this.to in this.inElem.index)) {
+            if (this.inElem && !(this.to in this.inElem.index)) {
                 console.error(this.to, 'not found in', this.inElem);
             }
         }
     });
 })()
-
diff --git a/section.html b/section.html
index df23b70..c0d032f 100644
--- a/section.html
+++ b/section.html
@@ -22,23 +22,21 @@
     Also recognizes attributes 'id' and 'title', but marking these as attributes
     cause problems for the ShadowDOM polyfill.
 -->
-<polymer-element name="cxx-section" constructor="CxxSectionElement" attributes="number">
+<dom-module id="cxx-section">
+  <style>
+    :host { display: block; }
+    :host:target {background-color: inherit;}
+    :host:target header > ::content > h1 {background-color: #fed;}
+    header > ::content > h1 { display: inline; font-size: 100%; }
+    header { font-weight: bold; margin-top: 20px; margin-bottom: 20px;
+      page-break-inside: avoid; page-break-after: avoid; }
+    header::after { clear:both; display: block; content: " "; height: 0 }
+  </style>
   <template>
-    <style>
-      :host { display: block; }
-      :host:target {background-color: inherit;}
-      :host:target > section > h1 {background-color: #fed;}
-      polyfill-next-selector { content: 'header > h1' }
-      ::content h1 { display: inline; font-size: 100%; }
-      header { font-weight: bold; margin-top: 20px; margin-bottom: 20px;
-               page-break-inside: avoid; page-break-after: avoid; }
-      header::after { clear:both; display: block; content: " "; height: 0 }
-    </style>
-
     <section>
-      <header><span class="section-number">{{sec_num}}</span> <content select="h1"></content> <span style="float:right"><a href="#{{id}}">[{{id}}]</a></span></header>
+      <header><span class="section-number">{{sec_num}}</span> <content select="h1"></content> <span style="float:right"><a href="{{prependHash(id)}}">{{surroundWithBrackets(id)}}</a></span></header>
       <content></content>
     </section>
   </template>
-  <script src="section.js"></script>
-</polymer-element>
+</dom-module>
+<script src="section.js"></script>
diff --git a/section.js b/section.js
index 2e7ecfd..263d407 100644
--- a/section.js
+++ b/section.js
@@ -13,10 +13,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+var CxxSectionBehavior, CxxSectionElement;
 (function() {
-    Polymer('cxx-section', {
-        // String section number, like "17.2.3". 1-based.
-        sec_num: "?",
+    'use strict';
+
+    CxxSectionBehavior = {
+        properties: {
+            id: {
+                type: String,
+            },
+            number: {
+                type: Number,
+                value: null,
+            },
+            // String section number, like "17.2.3". 1-based.
+            sec_num: {
+                type: String,
+                value: "?",
+                observer: 'sec_numChanged',
+            },
+        },
+
+        // Template helpers:
+        prependHash: function(value) {
+            return '#' + value;
+        },
+        surroundWithBrackets: function(value) {
+            return '[' + value + ']';
+        },
+
+        // External interface:
 
         checkInvariants: function() {
             if (!this.id) {
@@ -28,7 +54,8 @@ limitations under the License.
             this.sec_num = sec_num + '';
             var child_index = 1;
             // Assume there aren't any elements between cxx-section levels.
-            for (var child = this.firstChild; child; child = child.nextSibling) {
+            for (var child = Polymer.dom(this).firstChild; child;
+                 child = Polymer.dom(child).nextSibling) {
                 if (child instanceof CxxSectionElement) {
                     if (child.number)
                         child_index = Number(child.number);
@@ -46,9 +73,9 @@ limitations under the License.
             }
         },
 
-        domReady: function() {
-            var title_element = this.querySelector('h1');
-            if (title_element && title_element.parentElement == this)
+        ready: function() {
+            var title_element = Polymer.dom(this).querySelector('h1');
+            if (title_element && Polymer.dom(title_element).parentElement == this)
                 this.title_element = title_element;
 
             this.numberParagraphChildren();
@@ -56,9 +83,9 @@ limitations under the License.
 
         numberParagraphChildren: function(rootElement, para_num_start) {
             var para_num = para_num_start || 1;
-            for (var child = (rootElement || this).firstElementChild;
+            for (var child = Polymer.dom(rootElement || this).firstElementChild;
                  child;
-                 child = child.nextElementSibling) {
+                 child = Polymer.dom(child).nextElementSibling) {
                 if (child instanceof CxxSectionElement)
                     return para_num;
                 else if (child instanceof HTMLParagraphElement && !child.classList.contains('cont'))
@@ -66,7 +93,7 @@ limitations under the License.
                 else if (child instanceof CxxFunctionElement) {
                     para_num = this.numberParagraph(para_num, child);
                     para_num = this.numberParagraphChildren(child, para_num);
-                } else if (child instanceof CxxFunctionAttributeElement)
+                } else if (child.isCxxFunctionAttribute)
                     para_num = this.numberParagraph(para_num, child);
             }
             return para_num;
@@ -82,12 +109,17 @@ limitations under the License.
                 console.warn('Paragraph already has id:', element);
                 var anchor = document.createElement('a');
                 anchor.id = id;
-                element.insertBefore(anchor, element.firstChild);
+                Polymer.dom(element).insertBefore(anchor, Polymer.dom(element).firstChild);
             } else {
                 element.id = id;
             }
             element.setAttribute('para_num', number);
             return number + 1
         }
-    })
+    };
+
+    CxxSectionElement = Polymer({
+        is: 'cxx-section',
+        behaviors: [CxxSectionBehavior],
+    });
 })();
diff --git a/table.html b/table.html
index 7060b09..fe8b070 100644
--- a/table.html
+++ b/table.html
@@ -21,85 +21,88 @@
     With class="list", the table represents a list, which will be organized
     into the number of columns set by the [columns] attribute.
 -->
-<polymer-element name="cxx-table" extends="table" constructor="CxxTableElement" attributes="columns">
+<dom-module id="cxx-table">
   <template>
     <style>
       :host { margin-left: auto; margin-right: auto;
               border-collapse: collapse;
               border: thin solid black; }
       caption { white-space: nowrap; }
-      polyfill-next-selector { content: 'caption caption' }
-      ::content caption { display: inline; }
+      caption > ::content caption { display: inline; }
 
-      polyfill-next-selector { content: 'th, td' }
-      ::content th, ::content td {
+      :host > ::content th, :host > ::content td {
         border-style: solid none; border-color: black;
         border-width: thin;
         padding: 0 0.25em; }
 
-      polyfill-next-selector { content: ':host(.column-rules) th, :host(.column-rules) td' }
-      :host(.column-rules) ::content th,
-      :host(.column-rules) ::content td {
+      :host(.column-rules) > ::content th,
+      :host(.column-rules) > ::content td {
           border-left-style: solid;  border-right-style: solid;}
 
-      polyfill-next-selector { content: 'th' }
-      ::content th { border-bottom: double medium; }
-      polyfill-next-selector { content: ':host(.single-border) th' }
-      :host(.single-border) ::content th { border-bottom: solid thin; }
+      :host > ::content th { border-bottom: double medium; }
+      :host(.single-border) > ::content th { border-bottom: solid thin; }
 
-      polyfill-next-selector { content: ':host(.center) td' }
-      :host(.center) ::content td { text-align: center; }
+      :host(.center) > ::content td { text-align: center; }
 
-      polyfill-next-selector { content: ':host(.list) td' }
-      :host(.list) ::content td { border: none; vertical-align: top; }
+      :host(.list) > ::content td { border: none; vertical-align: top; }
 
-      polyfill-next-selector { content: ':host(.list) ul' }
-      :host(.list) ::content ul { padding-left: 0; margin: 0;}
-      polyfill-next-selector { content: ':host(.list) ul li::before' }
-      :host(.list) ::content ul li::before { content: '';}
+      :host(.list) > ::content ul { padding-left: 0; margin: 0;}
+      :host(.list) > ::content ul li::before { content: '';}
     </style>
 
-    <caption>Table {{table_num}} — <wbr><content select="caption"></content></caption>
+    <caption>Table <span>{{table_num}}</span> — <wbr><content select="caption"></content></caption>
     <content></content>
   </template>
   <script>
     (function() {
       function renumberTables() {
-        document.querySelectorAll('[is=cxx-table]').array().forEach(function(table, index) {
+        Polymer.dom(document).querySelectorAll('[is=cxx-table]').forEach(function(table, index) {
           table.table_num = index + 1;
         });
       }
-      Polymer('cxx-table', {
+      window.CxxTableElement = Polymer({
+        is: 'cxx-table',
+        extends: 'table',
+
+        properties: {
+          columns: {
+            type: Number,
+          },
+          table_num: {
+            type: Number,
+          },
+        },
+
         arrangeColumns: function() {
           // Balance list-tables so we don't have to do it manually.  I tried
           // using CSS columns, but the appearance isn't as nice.
           if (this.classList.contains('list')) {
             // Set ARIA role so screenreaders go straight to the list.
-            this.setAttribute('role', 'presentation');
+            Polymer.dom(this).setAttribute('role', 'presentation');
 
             // Avoid messing with tables that are manually formatted.
             if (this.rows.length == 1 &&
                 this.rows[0].cells.length == 1 &&
-                this.rows[0].cells[0].firstElementChild instanceof HTMLUListElement) {
+                Polymer.dom(this.rows[0].cells[0]).firstElementChild instanceof HTMLUListElement) {
               var tr = this.rows[0];
-              var elems = tr.querySelectorAll('li').array();
-              tr.cells[0].remove();
+              var elems = Polymer.dom(tr).querySelectorAll('li');
+              Polymer.dom(Polymer.dom(tr.cells[0]).parentNode).removeChild(tr.cells[0]);
               var rows = Math.ceil(elems.length / this.columns);
               for (var column = 0; column < this.columns; column++) {
                 var td = document.createElement('td');
-                tr.appendChild(td);
+                Polymer.dom(tr).appendChild(td);
                 var ul = document.createElement('ul');
-                td.appendChild(ul);
+                Polymer.dom(td).appendChild(ul);
                 for (var row = 0; row < rows; row++) {
                   var index = column*rows + row;
                   if (index < elems.length)
-                    ul.appendChild(elems[index]);
+                    Polymer.dom(ul).appendChild(elems[index]);
                 }
               }
             }
           }
         },
-        domReady: function() {
+        ready: function() {
           renumberTables.apply(this);
           this.arrangeColumns();
         },
@@ -107,4 +110,4 @@
       });
     })();
   </script>
-</polymer-element>
+</dom-module>
diff --git a/titlepage.html b/titlepage.html
index 9ec7cf0..4e438ac 100644
--- a/titlepage.html
+++ b/titlepage.html
@@ -17,68 +17,60 @@
 Has children: cxx-docnum, time[pubdate], cxx-editor, cxx-revises,
 and <h1> for the title.
 
-The document stage can be set in two ways:
-  1. Add a 'cxx-draft', 'cxx-pdts', or `cxx-dts' class to the <body> element.
-  2. Set the <cxx-titlepage stage> attribute to 'draft', 'pdts', or `dts`.
-Each will be propagated to the other.
+The document stage is set by adding a 'cxx-draft', 'cxx-pdts', 'cxx-dts', or 'cxx-ts'
+class to the <body> element.
 We'll add more stages as our documents get to them.
 
 cxx-titlepage sets the document title based on its <h1> child.
 -->
-<polymer-element name="cxx-titlepage" attributes="stage">
-  <template>
-    <style>
-      :host, .page { display: block; min-height: 100%; }
-      .page { page-break-before: always; page-break-after: always; min-height: 100vh; margin-bottom: 2em; }
-      @media print {
-        /* Using an exact height for printed documents works around a bug in
-           Prince that breaks footnotes when the html/body height is set to
-           100%. */
-        .page { height: 8.8in; }
-      }
+<dom-module id="cxx-titlepage">
+  <style>
+    :host, .page { display: block; min-height: 100%; }
+    .page { page-break-before: always; page-break-after: always; min-height: 100vh; margin-bottom: 2em; }
+    @media print {
+      /* Using an exact height for printed documents works around a bug in
+         Prince that breaks footnotes when the html/body height is set to
+         100%. */
+      .page { height: 8.8in; }
+    }
 
-      /* position:relative on :host makes position:absolute on its children work
-         relative to :host's bounds. */
-      .page { position: relative; }
-      table td, table th { border: none; }
+    /* position:relative on :host makes position:absolute on its children work
+       relative to :host's bounds. */
+    .page { position: relative; }
+    table td, table th { border: none; }
 
-      :host-context(body.cxx-draft) .header { position: absolute; right: 0; top: 0; }
-      :host-context(body.cxx-draft) h1 { position: absolute; top: 40%; text-align: center; }
-      :host-context(body.cxx-draft) p.warning { position: absolute; bottom: 5%; }
+    /* Inside a document with the .cxx-draft class. */
+    .header.draft { position: absolute; right: 0; top: 0; }
+    h1.draft { position: absolute; top: 40%; text-align: center; }
+    p.warning { position: absolute; bottom: 5%; }
 
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) .header { position: absolute; right: 0; top: 0; text-align: right; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) .header ::content cxx-docnum { font-size: 150%; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) .header cxx-docnum { font-size: 150%; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) hgroup { position: absolute; top: 30%; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) hgroup * { margin: 0; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) hgroup h1 { font-size: 150%; font-weight: bold; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) hgroup h2 { font-size: 100%; font-weight: normal; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) .footer { position: absolute; left: 0; bottom: 5%; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) figure { border: #111 solid 1px; padding: 10px; margin-left: auto; margin-right: auto; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) figcaption { text-align: center; font-weight: bold; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) .warning { position: absolute; bottom: 20%; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) .copyright address { font-style: normal; margin-left: 2em; }
-      :host-context(body.cxx-pdts, body.cxx-dts, body.cxx-ts) .copyright address a { color: inherit; text-decoration: inherit; }
+    /* Inside a document with the .cxx-pdts, .cxx-dts, or .cxx-ts classes. */
+    .header.ballot { position: absolute; right: 0; top: 0; text-align: right; }
+    .header.ballot ::content cxx-docnum { font-size: 150%; }
+    .header.ballot cxx-docnum { font-size: 150%; }
+    hgroup.ballot { position: absolute; top: 30%; }
+    hgroup.ballot * { margin: 0; }
+    hgroup.ballot h1 { font-size: 150%; font-weight: bold; }
+    hgroup.ballot h2 { font-size: 100%; font-weight: normal; }
+    .footer { position: absolute; left: 0; bottom: 5%; }
+    figure { border: #111 solid 1px; padding: 10px; margin-left: auto; margin-right: auto; }
+    figcaption { text-align: center; font-weight: bold; }
+    figure.warning { position: absolute; bottom: 20%; }
+    .copyright address { font-style: normal; margin-left: 2em; }
+    .copyright address a { color: inherit; text-decoration: inherit; }
 
-      th { text-align: left; vertical-align: top; }
-    </style>
-    <template if="{{stage == 'draft'}}">
+    th { text-align: left; vertical-align: top; }
+  </style>
+  <template>
+    <template is="dom-if" if="{{stageIs(stage, 'draft')}}">
       <div class="page">
-        <table class="header">
-          <template if="{{docnum}}">
-            <tr><th>Document Number:</th><td><content select="cxx-docnum"></content></td></tr>
-          </template>
-          <template if="{{hasPubdate}}">
-            <tr><th>Date:</th><td><time pubdate><span class="pubyear">{{pubyear}}</span>-{{pubmonth}}-{{pubday}}</time></td></tr>
-          </template>
-          <template if="{{revises}}">
-            <tr><th>Revises:</th><td><content select="cxx-revises"></content></td></tr>
-          </template>
-          <template if="{{editor}}">
-            <tr><th>Editor:</th><td><content select="cxx-editor"></content></td></tr>
-          </template>
+        <table class="header draft">
+          <tr hidden$="{{!hasDocnum}}"><th>Document Number:</th><td><content select="cxx-docnum"></content></td></tr>
+          <tr hidden$="{{!hasPubdate}}"><th>Date:</th><td><time pubdate><span class="pubyear">{{pubyear}}</span>-<span>{{concat(pubmonth, '-', pubday)}}</span></time></td></tr>
+          <tr hidden$="{{!hasRevises}}"><th>Revises:</th><td><content select="cxx-revises"></content></td></tr>
+          <tr hidden$="{{!hasEditor}}"><th>Editor:</th><td><content select="cxx-editor"></content></td></tr>
         </table>
-        <h1>Working Draft, {{title}}</h1>
+        <h1 class="draft">{{concat('Working Draft\, ', title)}}</h1>
         <p class="warning"><strong>Note: this is an early draft. It’s known to be
         incomplet and incorrekt, and it has lots of b<span
         style="margin-left: -1.2pt; margin-right: 1pt">a</span>d<span
@@ -88,29 +80,29 @@ <h1>Working Draft, {{title}}</h1>
       </div>
     </template>
 
-    <template if="{{stage == 'pdts' || stage == 'dts' || stage == 'ts'}}">
+    <template is="dom-if" if="{{stageIs(stage, 'pdts', 'dts', 'ts')}}">
       <div class="page">
-        <div class="header">
-          <template if="{{stage == 'pdts' || stage == 'dts'}}">
+        <div class="header ballot">
+          <template is="dom-if" if="{{stageIs(stage, 'pdts', 'dts')}}">
             <strong>ISO/IEC JTC1 SC22 WG21 <content select="cxx-docnum"/></content></strong><br/>
-            Date: <time pubdate><span class="pubyear">{{pubyear}}</span>-{{pubmonth}}-{{pubday}}</time><br/>
-            <template if="{{stage == 'pdts'}}">
+            Date: <time pubdate><span class="pubyear">{{pubyear}}</span>-<span>{{concat(pubmonth, '-', pubday)}}</span></time><br/>
+            <template is="dom-if" if="{{stageIs(stage, 'pdts')}}">
               ISO/IEC PDTS <content select="cxx-project-number"></content><br/>
             </template>
-            <template if="{{stage == 'dts'}}">
+            <template is="dom-if" if="{{stageIs(stage, 'dts')}}">
               ISO/IEC DTS <content select="cxx-project-number"></content><br/>
             </template>
           </template>
-          <template if="{{stage == 'ts'}}">
+          <template is="dom-if" if="{{stageIs(stage, 'ts')}}">
             <strong class="docname">ISO/IEC <content select="cxx-project-number"></content>:<span class="pubyear">{{pubyear}}</span></strong><br/>
           </template>
           ISO/IEC JTC1 SC22 WG21<br/>
           Secretariat: ANSI
         </div>
-        <hgroup>
-          <h1>Programming Languages — {{title}}</h1>
-          <template if="{{title_fr}}">
-            <h2>Langages de programmation — {{title_fr}}</h2>
+        <hgroup class="ballot">
+          <h1>{{concat('Programming Languages — ', displayTitle)}}</h1>
+          <template is="dom-if" if="{{title_fr}}">
+            <h2>{{concat('Langages de programmation — ', title_fr)}}</h2>
           </template>
         </hgroup>
         <figure class="warning">
@@ -122,15 +114,15 @@ <h2>Langages de programmation — {{title_fr}}</h2>
           patent rights of which they are aware and to provide supporting documentation.</p>
         </figure>
         <div class="footer">
-          <template if="{{stage == 'pdts'}}">
+          <template is="dom-if" if="{{stageIs(stage, 'pdts')}}">
             Document type: Proposed Draft Technical Specification<br/>
             Document stage: (30) Committee<br/>
           </template>
-          <template if="{{stage == 'dts'}}">
+          <template is="dom-if" if="{{stageIs(stage, 'dts')}}">
             Document type: Draft Technical Specification<br/>
             Document stage: (40) Enquiry<br/>
           </template>
-          <template if="{{stage == 'ts'}}">
+          <template is="dom-if" if="{{stageIs(stage, 'ts')}}">
             Document type: Technical Specification<br/>
             Document stage: (60) Publication<br/>
           </template>
@@ -162,7 +154,7 @@ <h2>Langages de programmation — {{title_fr}}</h2>
       </div>
     </template>
 
-    <template if="{{!completedDomReady}}">
+    <template is="dom-if" restamp if="{{!completedDomReady}}">
       <!--
         Work around
         https://github.com/webcomponents/webcomponentsjs/issues/112 by
@@ -172,15 +164,15 @@ <h2>Langages de programmation — {{title_fr}}</h2>
       <content></content>
     </template>
   </template>
-  <script src="titlepage.js"></script>
-</polymer-element>
-<polymer-element name="cxx-project-number" noscript>
+</dom-module>
+<dom-module id="cxx-project-number">
   <!-- Find your project number at https://isocpp.org/std/status. -->
   <template><content></content></template>
-</polymer-element>
-<polymer-element name="cxx-docnum" noscript class="docname">
+</dom-module>
+<dom-module id="cxx-docnum">
   <template><content></content></template>
-</polymer-element>
-<polymer-element name="cxx-editor" noscript>
+</dom-module>
+<dom-module id="cxx-editor">
   <template><content></content></template>
-</polymer-element>
+</dom-module>
+<script src="titlepage.js"></script>
diff --git a/titlepage.js b/titlepage.js
index e86a7c8..15edafa 100644
--- a/titlepage.js
+++ b/titlepage.js
@@ -14,75 +14,98 @@ limitations under the License.
 */
 
 (function() {
-    Polymer('cxx-titlepage', {
-        // Default properties
-        projectNumber: null,
-        docnum: null,
-        hasPubdate: false,
-        editor: null,
-        revises: null,
-        title: null,
-        stage: null,
+    Polymer({
+        is: 'cxx-titlepage',
 
+        properties: {
+            projectNumber: {
+                type: Object,
+                value: null,
+            },
+            hasDocnum: Boolean,
+            hasPubdate: Boolean,
+            hasEditor: Boolean,
+            hasRevises: Boolean,
+            title: {
+                type: String,
+                value: null,
+            },
+            stage: {
+                type: String,
+                value: null,
+            },
+            completedDomReady: {
+                type: Boolean,
+                value: false,
+            },
+        },
+
+        // Template helpers:
+        concat: function() {
+            return Array.prototype.join.call(arguments, '');
+        },
+        stageIs: function(stage) {
+            return Array.prototype.slice.call(arguments, 1).some(function(expected) {
+                return stage === expected;
+            });
+        },
+
+        // Other members:
         computeStage: function() {
+            if (this.stage) {
+                console.error('Move the document stage into a "cxx-' + this.stage +
+                              '" class on <body>.');
+            }
+
             var stages = ['draft', 'pdts', 'dts', 'ts'];
             var presentStages = stages.filter(function(stage) {
                 return document.body.classList.contains('cxx-' + stage);
             });
             if (presentStages.length == 0) {
-                if (!this.stage) {
-                    console.error('Couldn\'t find a document stage in body.classList:', document.body.classList);
-                } else if (stages.indexOf(this.stage) == -1) {
-                    console.error('Unexpected stage: ' + this.stage);
-                } else {
-                    document.body.classList.add('cxx-' + this.stage);
-                }
+                console.error('Couldn\'t find a document stage in body.classList:', document.body.classList);
             } else if (presentStages.length > 1) {
                 console.error('Found multiple document stages in body.classList:', presentStages);
             } else {
-                if (this.stage) {
-                    console.warn('Document stage set on both <body> ("' + presentStages[0] +
-                                 '") and <cxx-titlepage> ("' + this.stage + '")');
-                }
                 this.stage = presentStages[0];
             }
+            Polymer.dom(this).classList.add('cxx-' + this.stage);
         },
 
         addISOSections: function() {
-                if (this.stage !== 'ts') {
-                    // Only include the ISO requirements in the
-                    // document sent for publication.
-                    return;
-                }
-                var toc = document.querySelector('cxx-toc');
-                if (toc) {
-                    var foreword = document.createElement('cxx-foreword');
-                    foreword.id = 'foreword';
-                    document.body.insertBefore(foreword, toc.nextSibling);
-                }
+            if (this.stage !== 'ts') {
+                // Only include the ISO requirements in the
+                // document sent for publication.
+                return;
+            }
+            var toc = Polymer.dom(document).querySelector('cxx-toc');
+            if (toc) {
+                var foreword = document.createElement('cxx-foreword');
+                foreword.id = 'foreword';
+                document.body.insertBefore(foreword, toc.nextSibling);
+            }
         },
 
-        domReady: function() {
-            this.projectNumber = this.querySelector('cxx-project-number');
-            this.docnum = this.querySelector('cxx-docnum');
-            var pubdateElem = this.querySelector('time[pubdate]');
-            this.hasPubdate = !!pubdateElem;
-            if (pubdateElem) {
-                var pubdate = pubdateElem.textContent.split('-');
-                this.pubyear = pubdate[0];
-                this.pubmonth = pubdate[1];
-                this.pubday = pubdate[2];
+        ready: function() {
+            this.projectNumber = Polymer.dom(this).querySelector('cxx-project-number');
+            this.hasDocnum = !!Polymer.dom(this).querySelector('cxx-docnum');
+            var pubdate = Polymer.dom(this).querySelector('time[pubdate]');
+            this.hasPubdate = !!pubdate;
+            if (pubdate) {
+                var splitPubdate = pubdate.textContent.split('-');
+                this.pubyear = splitPubdate[0];
+                this.pubmonth = splitPubdate[1];
+                this.pubday = splitPubdate[2];
             }
-            this.editor = this.querySelector('cxx-editor');
-            this.revises = this.querySelector('cxx-revises');
+            this.hasEditor = !!Polymer.dom(this).querySelector('cxx-editor');
+            this.hasRevises = !!Polymer.dom(this).querySelector('cxx-revises');
 
-            var title = this.querySelector('h1:lang(en)') || this.querySelector('h1');
+            var title = Polymer.dom(this).querySelector('h1:lang(en)') || Polymer.dom(this).querySelector('h1');
             if (title) {
-                this.title = title.textContent;
+                this.title = Polymer.dom(title).textContent;
             }
-            this.title_fr = this.querySelector('h2:lang(fr)');
+            this.title_fr = Polymer.dom(this).querySelector('h2:lang(fr)');
             if (this.title_fr) {
-                this.title_fr = this.title_fr.textContent;
+                this.title_fr = Polymer.dom(this.title_fr).textContent;
             }
 
             this.computeStage();
@@ -101,5 +124,14 @@ limitations under the License.
             this.addISOSections();
             this.completedDomReady = true;
         },
-    })
+    });
+    Polymer({is: 'cxx-project-number'});
+    Polymer({
+        is: 'cxx-docnum',
+        created: function() {
+            // .docname is used to set up page headers in the PDF version.
+            Polymer.dom(this).classList.add('docname');
+        },
+    });
+    Polymer({is: 'cxx-editor'});
 })();
diff --git a/toc.html b/toc.html
index bdd044a..f03d01b 100644
--- a/toc.html
+++ b/toc.html
@@ -15,38 +15,45 @@
 
 <!-- Draws a table of contents based on the <cxx-clause> and <cxx-section> elements. -->
 
-<polymer-element name="cxx-toc">
+<dom-module id="cxx-toc">
+  <style>
+    :host { display: block; }
+    nav > ol { font-weight: bold; }
+  </style>
   <template>
-    <style>
-      :host { display: block; }
-      nav > ol { font-weight: bold; }
-      ol { font-weight: normal; padding-left: 0; margin-left: 0; }
-
-      /* Browsers don't support ::marker or display:marker, so emulate it. */
-      li { list-style-type: none; }
-      .marker { display: inline-block; }
-
-      li .marker { width: 2em; text-align: left; }
-      ol ol { margin-left: 2em; }
-      li li .marker { width: 3em; }
-      ol ol ol { margin-left: 3em; }
-      li li li .marker { width: 3.5em; }
-      ol ol ol ol { margin-left: 3.5em; }
-      li li li li .marker { width: 4.5em; }
-    </style>
     <nav>
       <h1>Contents</h1>
-      <template bind="" id="hierarchy">
-        <template if="{{sections.length > 0}}">
-          <ol>
-            <template repeat="{{sections}}">
-              <li><template if="{{elem.sec_num}}"><span class="marker">{{elem.sec_num}}</span></template><a href="#{{elem.id}}">{{title}}</a><template bind="" ref="hierarchy"
-              ></template></li>
-            </template>
-          </ol>
-        </template>
-      </template>
+      <ol is="cxx-internal-toc-level" sections="{{sections}}"></ol>
     </nav>
   </template>
-  <script src="toc.js"></script>
-</polymer-element>
+</dom-module>
+<dom-module id="cxx-internal-toc-level">
+  <style>
+    ol { font-weight: normal; padding-left: 0; }
+
+    /* Browsers don't support ::marker or display:marker, so emulate it. */
+    li { list-style-type: none; }
+    .marker { display: inline-block; }
+
+    :host { padding-left: 0; margin-left: 0; }
+    li .marker { width: 2em; text-align: left; }
+    :host ol { margin-left: 2em; }
+    li /deep/ li .marker { width: 3em; }
+    :host ol::shadow ol { margin-left: 3em; }
+    li /deep/ li /deep/ li .marker { width: 3.5em; }
+    :host ol::shadow ol::shadow ol { margin-left: 3.5em; }
+    li /deep/ li /deep/ li /deep/ li .marker { width: 4.5em; }
+  </style>
+  <template>
+    <template is="dom-repeat" items="{{sections}}">
+      <li
+        ><template is="dom-if" if="{{item.elem.sec_num}}"><span class="marker">{{item.elem.sec_num}}</span></template
+        ><a href="{{prependHash(item.elem.id)}}">{{item.title}}</a
+        ><template is="dom-if" if="{{nonEmpty(item.sections)}}">
+          <ol is="cxx-internal-toc-level" sections="{{item.sections}}"></ol>
+        </template
+      ></li>
+    </template>
+  </template>
+</dom-module>
+<script src="toc.js"></script>
diff --git a/toc.js b/toc.js
index 3b094e0..8470264 100644
--- a/toc.js
+++ b/toc.js
@@ -14,35 +14,61 @@ limitations under the License.
 */
 
 (function() {
-    Polymer('cxx-toc', {
-        // Hierarchy :: [{ elem: Element, title: H1, sections: Hierarchy }]
-        sections: [],
+    Polymer({
+        is: 'cxx-internal-toc-level',
+        extends: 'ol',
+
+        prependHash: function(value) {
+            return '#' + value;
+        },
+        nonEmpty: function(array) {
+            return array.length > 0;
+        },
+    });
+
+    Polymer({
+        is: 'cxx-toc',
+
+        properties: {
+            // Hierarchy :: [{ elem: Element, title: H1, sections: Hierarchy }]
+            sections: {
+                type: Array,
+                value: function() { return []; },
+            },
+
+            // Updated with the list of <cxx-clause> elements in the document each
+            // time such an element is attached or detached.
+            clauses: {
+                type: Array,
+                value: function() { return []; },
+                observer: 'clausesChanged',
+            },
+        },
 
-        // Updated with the list of <cxx-clause> elements in the document each
-        // time such an element is attached or detached.
-        clauses: [],
 
         collectSections: function(root) {
             var sections = [];
-            for (var child = root.firstElementChild; child;
-                 child = child.nextElementSibling) {
+            for (var child = Polymer.dom(root).firstElementChild; child;
+                 child = Polymer.dom(child).nextSibling) {
+                if (!child.tagName)
+                    continue;
                 if (child.tagName.toUpperCase() != 'CXX-SECTION')
                     continue;
                 sections.push(this.collectSections(child));
             }
-            var h1 = root.querySelector('h1');
+            var h1 = Polymer.dom(root).querySelector('h1');
             return {elem: root,
-                    title: h1 ? h1.textContent : root.title,
+                    title: h1 ? Polymer.dom(h1).textContent : root.title,
                     sections: sections};
         },
 
         updateClauses: function() {
-            this.clauses = document.querySelectorAll('cxx-foreword,cxx-clause');
+            this.clauses = Polymer.dom(document).querySelectorAll('cxx-foreword,cxx-clause');
         },
 
         clausesChanged: function() {
             var clause_num = 1;
-            this.sections = this.clauses.array().map(function(clause) {
+            this.sections = this.clauses.map(function(clause) {
                 if (clause.set_clause_num) {
                     // Don't number things that can't accept numbers, indicated
                     // by not having a set_clause_num method.
@@ -52,7 +78,7 @@ limitations under the License.
             }, this);
         },
 
-        domReady: function() {
+        ready: function() {
             this.updateClauses();
         }
     })
diff --git a/util/get-element-by-id.html b/util/get-element-by-id.html
index c6457fb..e758283 100644
--- a/util/get-element-by-id.html
+++ b/util/get-element-by-id.html
@@ -21,7 +21,7 @@
 Then the containing element can define a method `variableToFillInChanged` that
 will be called when an element with the right ID is added to the document.
 -->
-<polymer-element name="cxx-get-element-by-id" attributes="elemId elem">
+<dom-module id="cxx-get-element-by-id">
   <template><style>:host {display: none}</style></template>
   <script>
     (function() {
@@ -38,11 +38,11 @@
         // addedNodes' IDs misses a bunch of IDs. Instead, we'll just search
         // for all the IDs we care about, any time anything changes.
         Object.keys(pendingIds).forEach(function(id) {
-          var elem = document.getElementById(id);
+          var elem = Polymer.dom(document).getElementById(id);
           if (elem) {
             pendingIds[id].forEach(function(waiting) {
               if (waiting.elemId == id)
-                waiting.elem = elem;
+                waiting._setElem(elem);
             });
             delete pendingIds[id];
           }
@@ -67,14 +67,27 @@
         });
       }
 
-      Polymer('cxx-get-element-by-id', {
-        elemId: '',
+      Polymer({
+        is: 'cxx-get-element-by-id',
+
+        properties: {
+          elemId: {
+            type: String,
+            value: '',
+            observer: 'elemIdChanged',
+          },
+          elem: {
+            type: Object,
+            notify: true,
+            readOnly: true,
+          },
+        },
         elemIdChanged: function() {
           if (!this.elemId) {
-            this.elem = null;
+            this._setElem(null);
             return;
           }
-          this.elem = document.getElementById(this.elemId);
+          this._setElem(Polymer.dom(document).getElementById(this.elemId));
           if (!this.elem) {
             watchFor(this.elemId, this);
           }
@@ -82,4 +95,4 @@
       });
     })();
   </script>
-</polymer-element>
+</dom-module>

From eb38ba7f0025ab03f09c05854bb230d970c9a2c7 Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Sat, 7 Nov 2015 15:52:53 -0800
Subject: [PATCH 02/13] Save the old polymer-1.0 in-progress update.

---
 bower.json                  |  2 +-
 figure.html                 | 20 ++++++++++-
 foreign-index.js            | 19 ++++++++--
 ref.html                    | 17 ++++-----
 ref.js                      | 69 +++++++++++++++++++------------------
 section.html                |  4 ++-
 section.js                  | 21 +++++++----
 table.html                  | 11 ++++++
 titlepage.html              |  2 ++
 titlepage.js                |  7 ++--
 toc.html                    | 40 ++++++++++-----------
 util/get-element-by-id.html |  6 ++--
 util/template-helpers.html  | 22 ++++++++++++
 13 files changed, 161 insertions(+), 79 deletions(-)
 create mode 100644 util/template-helpers.html

diff --git a/bower.json b/bower.json
index 17e45c9..169b028 100644
--- a/bower.json
+++ b/bower.json
@@ -10,7 +10,7 @@
     "tests"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.5",
     "iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
     "promise-polyfill": "PolymerLabs/promise-polyfill#^1.0.0",
     "fetch": "github/fetch#^0.9.0"
diff --git a/figure.html b/figure.html
index ec58e7b..495fb47 100644
--- a/figure.html
+++ b/figure.html
@@ -26,12 +26,14 @@
 
     </style>
     <figure>
-      <figcaption>Figure {{figure_num}} — <wbr><content select="figcaption"></content></figcaption>
+      <figcaption>Figure <span>{{figure_num}}</span> — <wbr><content select="figcaption"></content></figcaption>
       <content></content>
     </figure>
   </template>
   <script>
     (function() {
+      "use strict";
+
       function renumberFigures() {
         Polymer.dom(document).querySelectorAll('cxx-figure').forEach(function(figure, index) {
           figure.figure_num = index + 1;
@@ -39,6 +41,22 @@
       }
       window.CxxFigureElement = Polymer({
         is: 'cxx-figure',
+
+        properties: {
+          figure_num: {
+            type: Number,
+          },
+          numericTitle: {
+            type: String,
+            computed: 'computeNumericTitle(figure_num)',
+          },
+        },
+
+        // Computed properties:
+        computeNumericTitle: function(figure_num) {
+          return 'Figure ' + figure_num;
+        },
+
         attached: renumberFigures,
         detached: renumberFigures,
       });
diff --git a/foreign-index.js b/foreign-index.js
index d556dbd..95774a5 100644
--- a/foreign-index.js
+++ b/foreign-index.js
@@ -23,12 +23,22 @@ Polymer({
         name: {
             type: String,
         },
+        index: {
+            type: Object,
+            notify: true,
+            readOnly: true,
+        },
+        references: {
+            type: Object,
+            value: function() { return new Set(); },
+            readOnly: true,
+        }
     },
 
     attachIndex: function(e) {
-        this.index = e.detail.response;
+        this._setIndex(e.detail.response);
         if (typeof(this.index) != 'object') {
-            this.index = JSON.parse(this.index);
+            this._setIndex(JSON.parse(this.index));
         }
 
         for (var property in this.index) {
@@ -39,5 +49,10 @@ Polymer({
                               property, 'mapped to', this.index[property]);
             }
         }
+
+        var self = this;
+        this.references.forEach(function(reference) {
+            reference.index = self.index;
+        });
     }
 });
diff --git a/ref.html b/ref.html
index fdf8b8f..fa33355 100644
--- a/ref.html
+++ b/ref.html
@@ -13,7 +13,8 @@
 limitations under the License.
 -->
 
-<link rel="import" href="util/get-element-by-id.html"/>
+<link rel="import" href="util/template-helpers.html">
+<link rel="import" href="util/get-element-by-id.html">
 
 <!--
     The 'to' attribute is the id of a <cxx-section> or <cxx-table> element (or subclass).
@@ -29,17 +30,17 @@
 
 <dom-module name="cxx-ref">
   <template
-    ><cxx-get-element-by-id elemId="{{in}}" elem="{{inElem}}"></cxx-get-element-by-id
-    ><template is="dom-if" if="{{!in}}"><cxx-get-element-by-id elemId="{{to}}" elem="{{toElem}}"></cxx-get-element-by-id></template
+    ><cxx-get-element-by-id elem-id="{{in}}" elem="{{inElem}}"></cxx-get-element-by-id
+    ><template is="dom-if" if="{{!in}}"><cxx-get-element-by-id elem-id$="{{to}}" elem="{{toElem}}"></cxx-get-element-by-id></template
 
     ><template is="dom-if" if="{{insynopsis}}">// <i
-      ><template is="dom-if" if="{{inElem.index}}"><span>{{inElem.name}}</span> <span title="{{to}}">{{foreignSectionNumber}}</span></template
-      ><template is="dom-if" if="{{!in}}"><a title="{{to}}" href="{{prependHash(to)}}">{{targetNumber}}</a></template
-      >{{synopsisLabel}}</i></template
+      ><template is="dom-if" if="{{index}}"><span>{{inElem.name}}</span> <span title="{{to}}">{{foreignSectionNumber}}</span></template
+      ><template is="dom-if" if="{{!in}}"><a title="{{to}}" href="{{concat('#', to)}}">{{toElem.numericTitle}}</a></template
+     ><span>{{concat(', ', toElem.title_element.textContent)}}</span></i></template
 
     ><template is="dom-if" if="{{!insynopsis}}"
-      ><template is="dom-if" if="{{inElem.index}}"><span>{{inElem.name}}</span> <span title="{{to}}">{{foreignSectionNumber}}</span></template
-      ><template is="dom-if" if="{{!in}}"><a title="{{to}}" href="{{prependHash(to)}}">{{targetNumber}}</a></template
+      ><template is="dom-if" if="{{index}}"><span>{{inElem.name}}</span> <span title="{{to}}">{{foreignSectionNumber}}</span></template
+      ><template is="dom-if" if="{{!in}}"><a title="{{to}}" href="{{concat('#', to)}}">{{toElem.numericTitle}}</a></template
     ></template
   ></template>
   <script src="ref.js"></script>
diff --git a/ref.js b/ref.js
index 63dc768..43150db 100644
--- a/ref.js
+++ b/ref.js
@@ -17,6 +17,10 @@ limitations under the License.
     Polymer({
         is: 'cxx-ref',
 
+        behaviors: [
+            CxxTemplateHelpersBehavior,
+        ],
+
         properties: {
             to: {
                 type: String,
@@ -28,33 +32,26 @@ limitations under the License.
             },
             in: {
                 type: String,
+                value: null,
             },
             inElem: {
                 type: Object,
                 observer: 'inElemChanged',
             },
+            index: {
+                type: Object,
+                observer: 'indexChanged',
+            },
             insynopsis: {
                 type: Boolean,
                 value: false,
             },
-            targetNumber: {
-                type: String,
-                computed: 'computeTargetNumber(toElem.sec_num, toElem.table_num, toElem.figure_num)',
-            },
             foreignSectionNumber: {
                 type: String,
-                computed: 'computeForeignSectionNumber(inElem.index, to)',
-            },
-            synopsisLabel: {
-                type: String,
-                computed: 'computeSynopsisLabel(toElem.title_element.textContent)',
+                computed: 'computeForeignSectionNumber(index, to)',
             },
         },
 
-        observers: [
-            'indexChanged(inElem.index)'
-        ],
-
         checkInvariants: function() {
             if (this.in) {
                 if (!this.inElem) {
@@ -72,47 +69,53 @@ limitations under the License.
             }
         },
 
-        inElemChanged: function() {
+        attached: function() {
+            if (this.inElem) {
+                this.inElem.references.add(this);
+            }
+        },
+        detached: function() {
+            if (this.inElem) {
+                this.inElem.references.delete(this);
+            }
+        },
+
+        inElemChanged: function(newInElem, oldInElem) {
             if (this.inElem &&
                 this.inElem.tagName.toUpperCase() != 'CXX-FOREIGN-INDEX') {
                 console.error('<cxx-ref>.in (', this.in,
                               ') must be a <cxx-foreign-index>; was',
                               this.inElem);
             }
+            if (oldInElem) {
+                oldInElem.references.delete(this);
+                this.index = null;
+            }
+            if (newInElem) {
+                newInElem.references.add(this);
+                this.index = newInElem.index;
+            }
         },
         toElemChanged: function() {
             if (this.toElem) {
                 this.async(function() {
                     // Async makes sure the toElem is upgraded.
-                    if (!(this.toElem instanceof CxxSectionElement ||
-                          this.toElem instanceof CxxTableElement ||
-                          this.toElem instanceof CxxFigureElement)) {
+                    if (!this.toElem.numericTitle) {
                         console.error("Reference from", this,
-                                      "refers to non-section, non-table, non-figure element",
-                                      this.toElem);
+                                      "refers to un-numbered element",
+                                      this.toElem,
+                                      "(sections, tables, and figures are numbered)");
                     }
                 });
             }
         },
 
-        computeTargetNumber: function(sec_num, table_num, figure_num) {
-            return sec_num || table_num || figure_num;
-        },
-
         computeForeignSectionNumber: function(foreignIndex, to) {
             return '\u00A7' + foreignIndex[to];
         },
 
-        computeSynopsisLabel: function(targetTitle) {
-            return ', ' + targetTitle;
-        },
-
-        prependHash: function(value) {
-            return '#' + value;
-        },
-
-        indexChanged: function() {
-            if (this.inElem && !(this.to in this.inElem.index)) {
+        indexChanged: function(newIndex) {
+            if (newIndex && !(this.to in newIndex)) {
                 console.error(this.to, 'not found in', this.inElem);
             }
         }
diff --git a/section.html b/section.html
index c0d032f..0325a74 100644
--- a/section.html
+++ b/section.html
@@ -13,6 +13,8 @@
 limitations under the License.
 -->
 
+<link rel="import" href="util/template-helpers.html">
+
 <!--
     Sections auto-number themselves and their paragraphs. The chosen number can
     be overridden by setting the 'number' attribute. A paragraph can also be
@@ -34,7 +36,7 @@
   </style>
   <template>
     <section>
-      <header><span class="section-number">{{sec_num}}</span> <content select="h1"></content> <span style="float:right"><a href="{{prependHash(id)}}">{{surroundWithBrackets(id)}}</a></span></header>
+      <header><span class="section-number">{{sec_num}}</span> <content select="h1"></content> <span style="float:right"><a href="{{concat('#', id)}}">{{concat('[', id, ']')}}</a></span></header>
       <content></content>
     </section>
   </template>
diff --git a/section.js b/section.js
index 263d407..324dde7 100644
--- a/section.js
+++ b/section.js
@@ -17,7 +17,7 @@ var CxxSectionBehavior, CxxSectionElement;
 (function() {
     'use strict';
 
-    CxxSectionBehavior = {
+    var CxxSectionBehaviorImpl = {
         properties: {
             id: {
                 type: String,
@@ -32,14 +32,16 @@ var CxxSectionBehavior, CxxSectionElement;
                 value: "?",
                 observer: 'sec_numChanged',
             },
+            numericTitle: {
+                // Used in <cxx-ref>'s text.
+                type: String,
+                computed: 'computeNumericTitle(sec_num)',
+            },
         },
 
-        // Template helpers:
-        prependHash: function(value) {
-            return '#' + value;
-        },
-        surroundWithBrackets: function(value) {
-            return '[' + value + ']';
+        // Computed properties:
+        computeNumericTitle: function(sec_num) {
+            return sec_num;
         },
 
         // External interface:
@@ -118,6 +120,11 @@ var CxxSectionBehavior, CxxSectionElement;
         }
     };
 
+    CxxSectionBehavior = [
+        CxxTemplateHelpersBehavior,
+        CxxSectionBehaviorImpl,
+    ];
+
     CxxSectionElement = Polymer({
         is: 'cxx-section',
         behaviors: [CxxSectionBehavior],
diff --git a/table.html b/table.html
index fe8b070..9365e2c 100644
--- a/table.html
+++ b/table.html
@@ -70,9 +70,20 @@
           },
           table_num: {
             type: Number,
+            value: 0,
           },
+          numericTitle: {
+            type: String,
+            computed: 'computeNumericTitle(table_num)',
+          },
+        },
+
+        // Computed properties:
+        computeNumericTitle: function(table_num) {
+          return 'Table ' + table_num;
         },
 
+        // Lifecycle:
         arrangeColumns: function() {
           // Balance list-tables so we don't have to do it manually.  I tried
           // using CSS columns, but the appearance isn't as nice.
diff --git a/titlepage.html b/titlepage.html
index 4e438ac..93bd771 100644
--- a/titlepage.html
+++ b/titlepage.html
@@ -13,6 +13,8 @@
 limitations under the License.
 -->
 
+<link rel="import" href="util/template-helpers.html"></link>
+
 <!--
 Has children: cxx-docnum, time[pubdate], cxx-editor, cxx-revises,
 and <h1> for the title.
diff --git a/titlepage.js b/titlepage.js
index 15edafa..2cc7325 100644
--- a/titlepage.js
+++ b/titlepage.js
@@ -17,6 +17,10 @@ limitations under the License.
     Polymer({
         is: 'cxx-titlepage',
 
+        behaviors: [
+            CxxTemplateHelpersBehavior,
+        ],
+
         properties: {
             projectNumber: {
                 type: Object,
@@ -41,9 +45,6 @@ limitations under the License.
         },
 
         // Template helpers:
-        concat: function() {
-            return Array.prototype.join.call(arguments, '');
-        },
         stageIs: function(stage) {
             return Array.prototype.slice.call(arguments, 1).some(function(expected) {
                 return stage === expected;
diff --git a/toc.html b/toc.html
index f03d01b..378278d 100644
--- a/toc.html
+++ b/toc.html
@@ -15,11 +15,27 @@
 
 <!-- Draws a table of contents based on the <cxx-clause> and <cxx-section> elements. -->
 
+<style>
+  /* This works by skipping the Shadow/Shady DOM emulation, and just
+     styling the composed tree. */
+
+  cxx-toc { display: block; }
+  cxx-toc nav > ol { font-weight: bold; }
+  cxx-toc ol { font-weight: normal; padding-left: 0; margin-left: 0; }
+
+  /* Browsers don't support ::marker or display:marker, so emulate it. */
+  cxx-toc li { list-style-type: none; }
+  cxx-toc .marker { display: inline-block; }
+
+  cxx-toc li .marker { width: 2em; text-align: left; }
+  cxx-toc ol ol { margin-left: 2em; }
+  cxx-toc li li .marker { width: 3em; }
+  cxx-toc ol ol ol { margin-left: 3em; }
+  cxx-toc li li li .marker { width: 3.5em; }
+  cxx-toc ol ol ol ol { margin-left: 3.5em; }
+  cxx-toc li li li li .marker { width: 4.5em; }
+</style>
 <dom-module id="cxx-toc">
-  <style>
-    :host { display: block; }
-    nav > ol { font-weight: bold; }
-  </style>
   <template>
     <nav>
       <h1>Contents</h1>
@@ -28,22 +44,6 @@ <h1>Contents</h1>
   </template>
 </dom-module>
 <dom-module id="cxx-internal-toc-level">
-  <style>
-    ol { font-weight: normal; padding-left: 0; }
-
-    /* Browsers don't support ::marker or display:marker, so emulate it. */
-    li { list-style-type: none; }
-    .marker { display: inline-block; }
-
-    :host { padding-left: 0; margin-left: 0; }
-    li .marker { width: 2em; text-align: left; }
-    :host ol { margin-left: 2em; }
-    li /deep/ li .marker { width: 3em; }
-    :host ol::shadow ol { margin-left: 3em; }
-    li /deep/ li /deep/ li .marker { width: 3.5em; }
-    :host ol::shadow ol::shadow ol { margin-left: 3.5em; }
-    li /deep/ li /deep/ li /deep/ li .marker { width: 4.5em; }
-  </style>
   <template>
     <template is="dom-repeat" items="{{sections}}">
       <li
diff --git a/util/get-element-by-id.html b/util/get-element-by-id.html
index e758283..93537a5 100644
--- a/util/get-element-by-id.html
+++ b/util/get-element-by-id.html
@@ -22,7 +22,7 @@
 will be called when an element with the right ID is added to the document.
 -->
 <dom-module id="cxx-get-element-by-id">
-  <template><style>:host {display: none}</style></template>
+  <style>:host {display: none}</style>
   <script>
     (function() {
       'use strict';
@@ -38,7 +38,7 @@
         // addedNodes' IDs misses a bunch of IDs. Instead, we'll just search
         // for all the IDs we care about, any time anything changes.
         Object.keys(pendingIds).forEach(function(id) {
-          var elem = Polymer.dom(document).getElementById(id);
+          var elem = document.getElementById(id);
           if (elem) {
             pendingIds[id].forEach(function(waiting) {
               if (waiting.elemId == id)
@@ -87,7 +87,7 @@
             this._setElem(null);
             return;
           }
-          this._setElem(Polymer.dom(document).getElementById(this.elemId));
+          this._setElem(document.getElementById(this.elemId));
           if (!this.elem) {
             watchFor(this.elemId, this);
           }
diff --git a/util/template-helpers.html b/util/template-helpers.html
new file mode 100644
index 0000000..5dcaf0d
--- /dev/null
+++ b/util/template-helpers.html
@@ -0,0 +1,22 @@
+<!-- Copyright 2015 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script>
+var CxxTemplateHelpersBehavior = {
+  concat: function() {
+    return Array.prototype.join.call(arguments, '');
+  },
+};
+</script>

From 2ad25d18019e4d9b54de9b2d6268f89919f3d52f Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Sat, 7 Nov 2015 16:52:34 -0800
Subject: [PATCH 03/13] Update dependencies.

---
 bower.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bower.json b/bower.json
index 169b028..bac6547 100644
--- a/bower.json
+++ b/bower.json
@@ -10,9 +10,9 @@
     "tests"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.0.5",
+    "polymer": "Polymer/polymer#^1.2",
     "iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
     "promise-polyfill": "PolymerLabs/promise-polyfill#^1.0.0",
-    "fetch": "github/fetch#^0.9.0"
+    "fetch": "github/fetch#^0.10.0"
   }
 }

From f4c6a49c8011e8a5e9475e2ce7b3e7dcf5568832 Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Mon, 9 Nov 2015 22:11:56 -0800
Subject: [PATCH 04/13] Start adding automated tests.

---
 .travis.yml     |  5 +++++
 bower.json      |  3 +++
 email.html      | 15 ++++++++++++---
 package.json    | 21 +++++++++++++++++++++
 publish.html    |  2 ++
 publish.js      | 21 +++++++++++++--------
 test/email.html | 23 +++++++++++++++++++++++
 wct.conf.js     | 11 +++++++++++
 8 files changed, 90 insertions(+), 11 deletions(-)
 create mode 100644 .travis.yml
 create mode 100644 package.json
 create mode 100644 test/email.html
 create mode 100644 wct.conf.js

diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..5eaf150
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,5 @@
+language: node_js
+env:
+  global:
+    - secure: aY4V9FcP+9993spYv2yqmalJDQ5g76XpI3vOcmbzza7ycHRXPTQy0Uevp8bh/yBXP4wAkak7axh+fW1sEJXs5Ui2WOPlMdO1XpfbsMcOXW3sp0tZIUWM53OZXltyHIvSndAkpQN3RRq1EsI7FI68i+ckwdUCzLhqfIvF7RJSo4Y=
+    - secure: YJsQxD3G/lRmcAsAnWF1HYP2yYhmWZtWbiui1JR8XyMiyIpVYcwFsJUsf6mRZ/zR84XKiwtb7FClVkTrH4SIfkMhzGzXVv1yICopUEOJiV6cFr4twXtXFVTv0JGqBFLO2/fUeNqk6XWLRVkJUtKomG1ms5XD4aDh5JXwx/y0dKU=
diff --git a/bower.json b/bower.json
index bac6547..7530882 100644
--- a/bower.json
+++ b/bower.json
@@ -14,5 +14,8 @@
     "iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
     "promise-polyfill": "PolymerLabs/promise-polyfill#^1.0.0",
     "fetch": "github/fetch#^0.10.0"
+  },
+  "devDependencies": {
+    "web-component-tester": "~3.3.30"
   }
 }
diff --git a/email.html b/email.html
index a2c2116..1e8175c 100644
--- a/email.html
+++ b/email.html
@@ -12,7 +12,16 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
-<polymer-element name="cxx-email" noscript>
-  <template><a href="mailto:{{textContent}}"><content></content></a></template>
-</polymer-element>
+<dom-module id="cxx-email">
+  <template><a href="mailto:[[_computeTextContent()]]"><content></content></a></template>
+  <script>
+    Polymer({
+      is: 'cxx-email',
+      _computeTextContent: function() {
+        return Polymer.dom(this).textContent;
+      }
+    });
+  </script>
+</dom-module>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..9ccd92e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "cxx-html-doc-framework",
+  "version": "0.3.2",
+  "description": "A set of custom HTML elements to make writing well-formatted C++ papers and ISO documents easier.",
+  "main": "framework.html",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "node_modules/.bin/wct --plugin sauce"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com.:cplusplus/html-doc-framework.git"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "web-component-tester": "^3.3.30"
+  }
+}
diff --git a/publish.html b/publish.html
index e89b106..e9b8eca 100644
--- a/publish.html
+++ b/publish.html
@@ -13,6 +13,8 @@
 limitations under the License.
 -->
 
+<link rel="import" href="../polymer/polymer.html"/>
+
 <!-- This element creates a button that creates a link to a standalone HTML
      version of the current page.
 
diff --git a/publish.js b/publish.js
index 284026a..22f87bf 100644
--- a/publish.js
+++ b/publish.js
@@ -76,7 +76,7 @@ limitations under the License.
     // Replaces <caption>s inside <caption>s with <spans>, so that Firefox doesn't
     // omit them from the rendering.
     function fixNestedCaptions(doc) {
-        doc.querySelectorAll('caption caption').forEach(function(caption) {
+        forEach(doc.querySelectorAll('caption caption'), function(caption) {
             var span = doc.createElement('span');
             span.innerHTML = caption.innerHTML;
             caption.parentNode.insertBefore(span, caption);
@@ -89,17 +89,18 @@ limitations under the License.
         // because the copy doesn't have time to load the images.
         inlineImages(doc.getElementsByTagName('img'));
 
-        var copy = doc.cloneNode(true);
+        var newDoc = document.implementation.createHTMLDocument();
+        var copy = newDoc.importNode(doc.documentElement, true);
 
         // Remove elements that run code or don't contribute to the appearance
         // of the page.
-        forEach(['cxx-publish-button', 'script', 'link[rel=import]'],
+        forEach(['cxx-publish-button', 'script', 'link[rel=import]', 'template'],
                 function(selector) {
             forEach(copy.querySelectorAll(selector), function(node) {
                 node.remove();
             });
         });
-        forEach(copy.body.querySelectorAll('*'), function(node) {
+        forEach(copy.querySelectorAll('body *'), function(node) {
             if (getComputedStyle(node).display === 'none') {
                 node.remove();
             }
@@ -124,15 +125,16 @@ limitations under the License.
                     }
                     return styleText;
                 }).then(function(styleText) {
-                    var inlinedStyle = copy.createElement('style');
+                    var inlinedStyle = newDoc.createElement('style');
                     inlinedStyle.textContent = styleText;
                     extSheet.parentNode.insertBefore(inlinedStyle, extSheet);
                     extSheet.parentNode.removeChild(extSheet);
                 });
             });
 
-        copy.head.insertBefore(declareCustomTagNamesForIE8(),
-                               copy.head.firstElementChild);
+        var head = copy.querySelector('head');
+        head.insertBefore(declareCustomTagNamesForIE8(),
+                          head.firstElementChild);
 
         return Promise.all(sheetUpdates).then(function() {
             return copy;
@@ -141,7 +143,7 @@ limitations under the License.
 
     function buildSectionIndex(doc) {
         var result = {};
-        doc.querySelectorAll('cxx-clause,cxx-section').array().forEach(function(section) {
+        forEach(doc.querySelectorAll('cxx-clause,cxx-section'), function(section) {
             if (!section.id) {
                 console.warn(section, 'is missing its id.');
                 return;
@@ -170,6 +172,8 @@ limitations under the License.
             },
         },
 
+        cloneStaticAndInline: cloneStaticAndInline,
+
         publish: function() {
             if (this.publishing) {
                 return;
@@ -188,6 +192,7 @@ limitations under the License.
                                          {type: 'text/html'});
                 this.flattenedBlob = URL.createObjectURL(published);
                 this.sectionIndex = encodeURI('data:application/json,' + JSON.stringify(sectionIndex));
+                return this;
             }.bind(this)).catch(function(e) {
                 console.error(e);
                 this.publishing = false;
diff --git a/test/email.html b/test/email.html
new file mode 100644
index 0000000..2680246
--- /dev/null
+++ b/test/email.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../../web-component-tester/browser.js"></script>
+<link rel="import" href="../email.html">
+<link rel="import" href="../publish.html">
+</head>
+<body>
+  <cxx-email id="a">foo@example.com</cxx-email>
+  <cxx-publish-button id="publish"></cxx-publish-button>
+  <script>
+    suite('<cxx-email>', function() {
+      test('produces link', function() {
+        return document.getElementById('publish').cloneStaticAndInline(document)
+        .then(copy => {
+          var email = copy.querySelector('#a');
+          expect(email.outerHTML).equals('<cxx-email id="a"><a class="style-scope cxx-email" href="mailto:foo@example.com">foo@example.com</a></cxx-email>');
+        })
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/wct.conf.js b/wct.conf.js
new file mode 100644
index 0000000..3c41cad
--- /dev/null
+++ b/wct.conf.js
@@ -0,0 +1,11 @@
+module.exports = {
+    plugins: {
+        sauce: {
+            disabled: true,
+            browsers: [
+                "OS X 10.11/chrome",
+                "OS X 10.11/firefox",
+            ]
+        }
+    }
+};

From 0bc5f2ccd3a733bca8970c7f30febc24f03f50d0 Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Sun, 29 Nov 2015 17:11:46 -0800
Subject: [PATCH 05/13] Get the first automated test to pass.

---
 .gitignore                 |   4 ++
 bower.json                 |   2 +-
 gulpfile.js                |  27 +++++++++
 package.json               |   8 ++-
 publish.js                 | 121 ++++++++++++++++++++-----------------
 test-util/chai-html.src.js |   4 ++
 test/email.html            |   3 +-
 7 files changed, 111 insertions(+), 58 deletions(-)
 create mode 100644 gulpfile.js
 create mode 100644 test-util/chai-html.src.js

diff --git a/.gitignore b/.gitignore
index b37e43d..6a94b6b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,5 @@
 /bower_components
+/node_modules
+
+# Built
+/test-util/chai-html.js
diff --git a/bower.json b/bower.json
index 7530882..b9aed0d 100644
--- a/bower.json
+++ b/bower.json
@@ -16,6 +16,6 @@
     "fetch": "github/fetch#^0.10.0"
   },
   "devDependencies": {
-    "web-component-tester": "~3.3.30"
+    "web-component-tester": "^3.4.0"
   }
 }
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..fa60f5e
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,27 @@
+var browserify = require('browserify');
+var babelify = require('babelify');
+var gulp = require('gulp')
+var source = require('vinyl-source-stream')
+var wct = require('web-component-tester');
+
+gulp.task('chai-html', () => {
+  return browserify({
+    entries: './test-util/chai-html.src.js',
+    debug: true,
+  })
+  .transform(babelify.configure({presets: ["es2015"]}),
+             // Remove if https://github.com/i-like-robots/chai-html/pull/1 is accepted.
+             {global: true})
+  .bundle()
+  // Name the bundle.
+  .pipe(source('chai-html.js'))
+  // Write the bundle.
+  .pipe(gulp.dest('./test-util/'));
+});
+
+gulp.task('test:local', ['chai-html'], done => {
+  wct.test({plugins: {local: {},   sauce: false}}, done);
+})
+gulp.task('test:sauce', ['chai-html'], done => {
+  wct.test({plugins: {local: false, sauce: {}}}, done);
+})
diff --git a/package.json b/package.json
index 9ccd92e..5bff8e0 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "test": "test"
   },
   "scripts": {
-    "test": "node_modules/.bin/wct --plugin sauce"
+    "test": "node_modules/.bin/gulp test:sauce"
   },
   "repository": {
     "type": "git",
@@ -16,6 +16,12 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
+    "babel-preset-es2015": "^6.1.18",
+    "babelify": "^7.2.0",
+    "browserify": "^12.0.1",
+    "chai-html": "0.0.3",
+    "gulp": "^3.9.0",
+    "vinyl-source-stream": "^1.1.0",
     "web-component-tester": "^3.3.30"
   }
 }
diff --git a/publish.js b/publish.js
index 22f87bf..13804ca 100644
--- a/publish.js
+++ b/publish.js
@@ -39,7 +39,7 @@ limitations under the License.
             if (customTagNameSet.hasOwnProperty(name))
                 scriptComment += 'document.createElement("' + name + '");';
         }
-        scriptComment += '</script><![endif]'
+        scriptComment += '</script><![endif]';
         return document.createComment(scriptComment);
     }
 
@@ -61,16 +61,15 @@ limitations under the License.
     }
 
     function inlineImages(images) {
-        Array.prototype.forEach.call(images,
-            function(image) {
-                if (image.naturalWidth == 0)
-                    console.error(image, "hasn't loaded yet.");
-                var canvas = document.createElement('canvas');
-                canvas.width = image.naturalWidth;
-                canvas.height = image.naturalHeight;
-                canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height);
-                image.src = canvas.toDataURL();
-            });
+        Array.prototype.forEach.call(images, function(image) {
+            if (image.naturalWidth == 0)
+                console.error(image, "hasn't loaded yet.");
+            var canvas = document.createElement('canvas');
+            canvas.width = image.naturalWidth;
+            canvas.height = image.naturalHeight;
+            canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height);
+            image.src = canvas.toDataURL();
+        });
     }
 
     // Replaces <caption>s inside <caption>s with <spans>, so that Firefox doesn't
@@ -84,60 +83,72 @@ limitations under the License.
         });
     }
 
+    function newIframeDoc() {
+        return new Promise(function(resolve) {
+            var iframe = document.createElement('iframe');
+            iframe.src = "about:blank";
+            iframe.onload = function() {
+                resolve(iframe.contentDocument);
+            };
+            document.body.appendChild(iframe);
+        });
+    }
+
     function cloneStaticAndInline(doc) {
         // Inline the images on the source document instead of the copy
         // because the copy doesn't have time to load the images.
         inlineImages(doc.getElementsByTagName('img'));
 
-        var newDoc = document.implementation.createHTMLDocument();
-        var copy = newDoc.importNode(doc.documentElement, true);
+        return newIframeDoc().then(function(newDoc) {
+            var copy = newDoc.importNode(doc.documentElement, true);
 
-        // Remove elements that run code or don't contribute to the appearance
-        // of the page.
-        forEach(['cxx-publish-button', 'script', 'link[rel=import]', 'template'],
-                function(selector) {
-            forEach(copy.querySelectorAll(selector), function(node) {
-                node.remove();
-            });
-        });
-        forEach(copy.querySelectorAll('body *'), function(node) {
-            if (getComputedStyle(node).display === 'none') {
-                node.remove();
-            }
-        })
-
-        fixNestedCaptions(copy);
-
-        // Inline all style sheets.
-        var sheetUpdates = Array.prototype.map.call(
-            copy.querySelectorAll('link[rel="stylesheet"]'),
-            function(extSheet) {
-                return fetch(extSheet.href).catch(function(error) {
-                    console.warning('Could not fetch', extSheet.href,
-                                    'falling back to stylesheet contents.',
-                                    error);
-                    var styleText = '';
-                    var sheet = extSheet.sheet;
-                    if (!sheet.disabled) {
-                        forEach(sheet.cssRules, function(rule) {
-                            styleText += rule.cssText;
-                        });
-                    }
-                    return styleText;
-                }).then(function(styleText) {
-                    var inlinedStyle = newDoc.createElement('style');
-                    inlinedStyle.textContent = styleText;
-                    extSheet.parentNode.insertBefore(inlinedStyle, extSheet);
-                    extSheet.parentNode.removeChild(extSheet);
+            // Remove elements that run code or don't contribute to the appearance
+            // of the page.
+            forEach([
+                'cxx-publish-button', 'script', 'link[rel=import]', 'template'
+            ], function(selector) {
+                forEach(copy.querySelectorAll(selector), function(node) {
+                    node.remove();
                 });
             });
+            forEach(copy.querySelectorAll('body *'), function(node) {
+                if (getComputedStyle(node).display === 'none') {
+                    node.remove();
+                }
+            })
+
+            fixNestedCaptions(copy);
+
+            // Inline all style sheets.
+            var sheetUpdates = Array.prototype.map.call(
+                copy.querySelectorAll('link[rel="stylesheet"]'),
+                function(extSheet) {
+                    return fetch(extSheet.href).catch(function(error) {
+                        console.warning('Could not fetch', extSheet.href,
+                                        'falling back to stylesheet contents.',
+                                        error);
+                        var styleText = '';
+                        var sheet = extSheet.sheet;
+                        if (!sheet.disabled) {
+                            forEach(sheet.cssRules, function(rule) {
+                                styleText += rule.cssText;
+                            });
+                        }
+                        return styleText;
+                    }).then(function(styleText) {
+                        var inlinedStyle = newDoc.createElement('style');
+                        inlinedStyle.textContent = styleText;
+                        extSheet.parentNode.insertBefore(inlinedStyle, extSheet);
+                        extSheet.parentNode.removeChild(extSheet);
+                    });
+            });
 
-        var head = copy.querySelector('head');
-        head.insertBefore(declareCustomTagNamesForIE8(),
-                          head.firstElementChild);
+            var head = copy.querySelector('head');
+            head.insertBefore(declareCustomTagNamesForIE8(), head.firstElementChild);
 
-        return Promise.all(sheetUpdates).then(function() {
-            return copy;
+            return Promise.all(sheetUpdates).then(function() {
+                return copy;
+            });
         });
     }
 
diff --git a/test-util/chai-html.src.js b/test-util/chai-html.src.js
new file mode 100644
index 0000000..5fd60a2
--- /dev/null
+++ b/test-util/chai-html.src.js
@@ -0,0 +1,4 @@
+// This file will be browserified into chai-html.js.
+
+var chaiHtml  = require('chai-html')
+window.chai.use(chaiHtml)
diff --git a/test/email.html b/test/email.html
index 2680246..0f27641 100644
--- a/test/email.html
+++ b/test/email.html
@@ -2,6 +2,7 @@
 <meta charset="utf-8">
 <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../web-component-tester/browser.js"></script>
+<script src="../test-util/chai-html.js"></script>
 <link rel="import" href="../email.html">
 <link rel="import" href="../publish.html">
 </head>
@@ -14,7 +15,7 @@
         return document.getElementById('publish').cloneStaticAndInline(document)
         .then(copy => {
           var email = copy.querySelector('#a');
-          expect(email.outerHTML).equals('<cxx-email id="a"><a class="style-scope cxx-email" href="mailto:foo@example.com">foo@example.com</a></cxx-email>');
+          expect(email.outerHTML).html.deep.equals('<cxx-email id="a"><a class="style-scope cxx-email" href="mailto:foo@example.com">foo@example.com</a></cxx-email>');
         })
       });
     });

From 44772c02053ac5ba2ab6db84e35e1eab47c10fd5 Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Sun, 29 Nov 2015 17:17:51 -0800
Subject: [PATCH 06/13] Use the latest version of node, and TravisCI's new
 infrastructure.

---
 .travis.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index 5eaf150..638669c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,5 +1,8 @@
 language: node_js
+node_js:
+  - "stable"
 env:
   global:
     - secure: aY4V9FcP+9993spYv2yqmalJDQ5g76XpI3vOcmbzza7ycHRXPTQy0Uevp8bh/yBXP4wAkak7axh+fW1sEJXs5Ui2WOPlMdO1XpfbsMcOXW3sp0tZIUWM53OZXltyHIvSndAkpQN3RRq1EsI7FI68i+ckwdUCzLhqfIvF7RJSo4Y=
     - secure: YJsQxD3G/lRmcAsAnWF1HYP2yYhmWZtWbiui1JR8XyMiyIpVYcwFsJUsf6mRZ/zR84XKiwtb7FClVkTrH4SIfkMhzGzXVv1yICopUEOJiV6cFr4twXtXFVTv0JGqBFLO2/fUeNqk6XWLRVkJUtKomG1ms5XD4aDh5JXwx/y0dKU=
+sudo: false

From a8974e003dfdfb215cebfa79a2361a5702316e40 Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Sun, 29 Nov 2015 18:11:00 -0800
Subject: [PATCH 07/13] Specify Sauce browsers.

---
 gulpfile.js |  2 +-
 wct.conf.js | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index fa60f5e..b08e8d4 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -23,5 +23,5 @@ gulp.task('test:local', ['chai-html'], done => {
   wct.test({plugins: {local: {},   sauce: false}}, done);
 })
 gulp.task('test:sauce', ['chai-html'], done => {
-  wct.test({plugins: {local: false, sauce: {}}}, done);
+  wct.test({plugins: {local: false, sauce: {disabled:false}}}, done);
 })
diff --git a/wct.conf.js b/wct.conf.js
index 3c41cad..c0238dc 100644
--- a/wct.conf.js
+++ b/wct.conf.js
@@ -1,10 +1,18 @@
 module.exports = {
+    testTimeout: 240 * 1000,
     plugins: {
         sauce: {
             disabled: true,
             browsers: [
-                "OS X 10.11/chrome",
-                "OS X 10.11/firefox",
+                {
+                    "browserName": "chrome",
+                    "platform": "OS X 10.11",
+                    "version": "beta"
+                }, {
+                    "browserName": "firefox",
+                    "platform": "Windows 10",
+                    "version": ""
+                }
             ]
         }
     }

From 76a0190ba83155c5d22bec3a6232323ad3389db1 Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Sun, 29 Nov 2015 19:54:30 -0800
Subject: [PATCH 08/13] Use Travis CI's sauce_connect plugin instead of relying
 on wct-sauce.

---
 .travis.yml | 10 ++++++----
 wct.conf.js |  1 +
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 638669c..de036d5 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,8 +1,10 @@
 language: node_js
 node_js:
   - "stable"
-env:
-  global:
-    - secure: aY4V9FcP+9993spYv2yqmalJDQ5g76XpI3vOcmbzza7ycHRXPTQy0Uevp8bh/yBXP4wAkak7axh+fW1sEJXs5Ui2WOPlMdO1XpfbsMcOXW3sp0tZIUWM53OZXltyHIvSndAkpQN3RRq1EsI7FI68i+ckwdUCzLhqfIvF7RJSo4Y=
-    - secure: YJsQxD3G/lRmcAsAnWF1HYP2yYhmWZtWbiui1JR8XyMiyIpVYcwFsJUsf6mRZ/zR84XKiwtb7FClVkTrH4SIfkMhzGzXVv1yICopUEOJiV6cFr4twXtXFVTv0JGqBFLO2/fUeNqk6XWLRVkJUtKomG1ms5XD4aDh5JXwx/y0dKU=
+addons:
+  sauce_connect:
+    username:
+      secure: "UGu1tUabPHdqCE+4dfFXWejkaEhmXvyUvmk4CBhoYJ62HvgNrVCaE0CZNRmKRqZTtNj1FKQiybiEh6LTe3/+06QdYywd2lmHaycCirBO+2nfA62WlgY/seHwJ5l9AOjjxdIauoZuPY4NySjdAEcxID495yo9DxyNvKTnJhnoXg4="
+    access_key:
+      secure: "jP3TUFS4NqnoclZuEzgVSzV6UYpi1pZfaORLygI6rFXO1Y8kg4i00JnkjwgDDMNuAT1MFC0MQwWPdO6WkhgG3bZEsaNUi55RF8InZXaqb8hT1qemrWduI7SSk0H2JHxIRisVDLh4wZT/hRN5kvZw/M60YI/dOL72XuT4IiF5RGk="
 sudo: false
diff --git a/wct.conf.js b/wct.conf.js
index c0238dc..ed05069 100644
--- a/wct.conf.js
+++ b/wct.conf.js
@@ -3,6 +3,7 @@ module.exports = {
     plugins: {
         sauce: {
             disabled: true,
+            tunnelId: process.env.TRAVIS_JOB_NUMBER,
             browsers: [
                 {
                     "browserName": "chrome",

From 9bc4606bfa687f90ea42aa4843f535465aa4922d Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Sun, 29 Nov 2015 20:08:47 -0800
Subject: [PATCH 09/13] Cache npm dependencies.

---
 .travis.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index de036d5..8568243 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -8,3 +8,6 @@ addons:
     access_key:
       secure: "jP3TUFS4NqnoclZuEzgVSzV6UYpi1pZfaORLygI6rFXO1Y8kg4i00JnkjwgDDMNuAT1MFC0MQwWPdO6WkhgG3bZEsaNUi55RF8InZXaqb8hT1qemrWduI7SSk0H2JHxIRisVDLh4wZT/hRN5kvZw/M60YI/dOL72XuT4IiF5RGk="
 sudo: false
+cache:
+  directories:
+    - node_modules

From 2aebc70c9ab0895dca675b1911f9c9160bf3ad68 Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Sun, 29 Nov 2015 20:45:39 -0800
Subject: [PATCH 10/13] Install bower dependencies as part of npm install.

---
 .travis.yml  | 1 +
 package.json | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 8568243..6315b86 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -10,4 +10,5 @@ addons:
 sudo: false
 cache:
   directories:
+    - bower_components
     - node_modules
diff --git a/package.json b/package.json
index 5bff8e0..63d575d 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "test": "test"
   },
   "scripts": {
-    "test": "node_modules/.bin/gulp test:sauce"
+    "postinstall": "bower install",
+    "test": "gulp test:sauce"
   },
   "repository": {
     "type": "git",
@@ -18,6 +19,7 @@
   "devDependencies": {
     "babel-preset-es2015": "^6.1.18",
     "babelify": "^7.2.0",
+    "bower": "*",
     "browserify": "^12.0.1",
     "chai-html": "0.0.3",
     "gulp": "^3.9.0",

From dfbd1b0b55d0739ecf70bcf41369132ff14dd9e1 Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Mon, 15 Feb 2016 13:49:42 -0800
Subject: [PATCH 11/13] Get the email test working.

---
 bower.json              |  5 +++--
 clause.html             |  2 ++
 codeblock.html          |  1 +
 definition-section.html |  1 +
 ednote.html             |  1 +
 example.html            |  1 +
 figure.html             |  1 +
 footnote.html           |  1 +
 foreign-index.html      |  1 +
 foreword.html           |  1 +
 function.html           |  1 +
 grammar.html            |  1 +
 note.html               |  1 +
 package.json            |  6 +++---
 range.html              |  1 +
 ref.html                |  1 +
 section.html            |  2 ++
 table.html              |  1 +
 term.html               |  1 +
 test/email.html         | 12 +++++++++---
 titlepage.html          |  1 +
 toc.html                |  1 +
 wct.conf.js             |  4 ++++
 weak-break.html         |  1 +
 24 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/bower.json b/bower.json
index b9aed0d..a006bcf 100644
--- a/bower.json
+++ b/bower.json
@@ -13,9 +13,10 @@
     "polymer": "Polymer/polymer#^1.2",
     "iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
     "promise-polyfill": "PolymerLabs/promise-polyfill#^1.0.0",
-    "fetch": "github/fetch#^0.10.0"
+    "fetch": "github/fetch#^0.11.0"
   },
   "devDependencies": {
-    "web-component-tester": "^3.4.0"
+    "web-component-tester": "^4.2.0",
+    "chai-dom": "~1.4.0"
   }
 }
diff --git a/clause.html b/clause.html
index 6880ff4..e62c6f8 100644
--- a/clause.html
+++ b/clause.html
@@ -12,6 +12,8 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="section.html">
 
 <script>
   (function() {
diff --git a/codeblock.html b/codeblock.html
index 25a55ff..3ca7723 100644
--- a/codeblock.html
+++ b/codeblock.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <!-- Code Block
   Code block elements are used to wrap program fragments in C++.
diff --git a/definition-section.html b/definition-section.html
index 0b4ccfc..78c8eef 100644
--- a/definition-section.html
+++ b/definition-section.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <!--
     Use this as <dl is="cxx-definition-section"> to build the unusual "terms
diff --git a/ednote.html b/ednote.html
index dc348c2..f54fae8 100644
--- a/ednote.html
+++ b/ednote.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <polymer-element name="cxx-ednote" noscript>
   <template>
diff --git a/example.html b/example.html
index 533279e..2996674 100644
--- a/example.html
+++ b/example.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <polymer-element name="cxx-example" noscript>
   <template>
diff --git a/figure.html b/figure.html
index 495fb47..0709789 100644
--- a/figure.html
+++ b/figure.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <!--
     Uses the HTML <figure> content model, but automatically adds a number to
diff --git a/footnote.html b/footnote.html
index b98353a..9b07173 100644
--- a/footnote.html
+++ b/footnote.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <dom-module id="cxx-footnote">
   <style>
diff --git a/foreign-index.html b/foreign-index.html
index e4391b6..26ba8c7 100644
--- a/foreign-index.html
+++ b/foreign-index.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <!--
     Refers to a JSON file at "src" mapping the name of a section to its number.
diff --git a/foreword.html b/foreword.html
index 5008e3e..72ea1e5 100644
--- a/foreword.html
+++ b/foreword.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <!--
 This element is empty and auto-generates the necessary content.
diff --git a/function.html b/function.html
index 620dd40..cee7edc 100644
--- a/function.html
+++ b/function.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <dom-module id="cxx-function">
   <style>
diff --git a/grammar.html b/grammar.html
index 1676a9f..32ae75e 100644
--- a/grammar.html
+++ b/grammar.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <!-- BNF Grammar block
   Use this tag to declare a fragment of a grammar specification.
diff --git a/note.html b/note.html
index 2acdb6a..00e6d4b 100644
--- a/note.html
+++ b/note.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <polymer-element name="cxx-note" noscript>
   <template><style>
diff --git a/package.json b/package.json
index 63d575d..8c8738b 100644
--- a/package.json
+++ b/package.json
@@ -20,10 +20,10 @@
     "babel-preset-es2015": "^6.1.18",
     "babelify": "^7.2.0",
     "bower": "*",
-    "browserify": "^12.0.1",
-    "chai-html": "0.0.3",
+    "browserify": "^13.0.0",
+    "chai-html": "0.0.4-0",
     "gulp": "^3.9.0",
     "vinyl-source-stream": "^1.1.0",
-    "web-component-tester": "^3.3.30"
+    "web-component-tester": "^4.2.0"
   }
 }
diff --git a/range.html b/range.html
index ac88d77..a60c71a 100644
--- a/range.html
+++ b/range.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <polymer-element name="cxx-range" attributes="begin end" noscript>
   <template>[<code>{{begin}}</code>, <code>{{end}}</code>)</template>
diff --git a/ref.html b/ref.html
index fa33355..fab6899 100644
--- a/ref.html
+++ b/ref.html
@@ -13,6 +13,7 @@
 limitations under the License.
 -->
 
+<link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="util/template-helpers.html">
 <link rel="import" href="util/get-element-by-id.html">
 
diff --git a/section.html b/section.html
index 0325a74..282e5e3 100644
--- a/section.html
+++ b/section.html
@@ -13,7 +13,9 @@
 limitations under the License.
 -->
 
+<link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="util/template-helpers.html">
+<link rel="import" href="function.html">
 
 <!--
     Sections auto-number themselves and their paragraphs. The chosen number can
diff --git a/table.html b/table.html
index 9365e2c..611355a 100644
--- a/table.html
+++ b/table.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <!--
     Uses the HTML <table> content model, but automatically adds a number to
diff --git a/term.html b/term.html
index 0b2d7c9..a5a7d79 100644
--- a/term.html
+++ b/term.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <!-- This element represents a technical term defined somewhere else in the
 standard or TS. -->
diff --git a/test/email.html b/test/email.html
index 0f27641..fc8fd2c 100644
--- a/test/email.html
+++ b/test/email.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../web-component-tester/browser.js"></script>
-<script src="../test-util/chai-html.js"></script>
+<script src="../../chai-dom/chai-dom.js"></script>
 <link rel="import" href="../email.html">
 <link rel="import" href="../publish.html">
 </head>
@@ -14,8 +14,14 @@
       test('produces link', function() {
         return document.getElementById('publish').cloneStaticAndInline(document)
         .then(copy => {
-          var email = copy.querySelector('#a');
-          expect(email.outerHTML).html.deep.equals('<cxx-email id="a"><a class="style-scope cxx-email" href="mailto:foo@example.com">foo@example.com</a></cxx-email>');
+          var email = copy.querySelector('cxx-email#a');
+          expect(email).to.exist;
+          var a = email.firstChild;
+          expect(a.localName).to.equal('a');
+          expect(a.nextSibling).to.not.exist;
+          expect(a).to.have.text('foo@example.com');
+          expect(a.href).to.equal('mailto:foo@example.com');
+          expect(a).to.have.class('cxx-email');
         })
       });
     });
diff --git a/titlepage.html b/titlepage.html
index 93bd771..eec58c3 100644
--- a/titlepage.html
+++ b/titlepage.html
@@ -13,6 +13,7 @@
 limitations under the License.
 -->
 
+<link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="util/template-helpers.html"></link>
 
 <!--
diff --git a/toc.html b/toc.html
index 378278d..da58902 100644
--- a/toc.html
+++ b/toc.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <!-- Draws a table of contents based on the <cxx-clause> and <cxx-section> elements. -->
 
diff --git a/wct.conf.js b/wct.conf.js
index ed05069..5211f3e 100644
--- a/wct.conf.js
+++ b/wct.conf.js
@@ -1,8 +1,12 @@
 module.exports = {
     testTimeout: 240 * 1000,
     plugins: {
+        local: {
+            browsers: ['chrome', 'firefox'],
+        },
         sauce: {
             disabled: true,
+            // Remove this once https://github.com/Polymer/wct-sauce/pull/15 is fixed.
             tunnelId: process.env.TRAVIS_JOB_NUMBER,
             browsers: [
                 {
diff --git a/weak-break.html b/weak-break.html
index 0928e02..2d6d82c 100644
--- a/weak-break.html
+++ b/weak-break.html
@@ -12,6 +12,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <!-- <wbr> doesn't work inside white-space:nowrap in Firefox, and
      white-space:normal with a U+200B (zero-width space) doesn't work in Chrome.

From 5cd575d9560a2f0450998fe91deb164e24e9abf2 Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Mon, 15 Feb 2016 13:58:09 -0800
Subject: [PATCH 12/13] Fix chai dependency.

---
 bower.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/bower.json b/bower.json
index a006bcf..64d1802 100644
--- a/bower.json
+++ b/bower.json
@@ -18,5 +18,8 @@
   "devDependencies": {
     "web-component-tester": "^4.2.0",
     "chai-dom": "~1.4.0"
+  },
+  "resolutions": {
+    "chai": "^3.0.0"
   }
 }

From a1d972c7a697c86bfac6977a5f8a293c3923c73f Mon Sep 17 00:00:00 2001
From: Jeffrey Yasskin <jyasskin@gmail.com>
Date: Mon, 15 Feb 2016 14:00:55 -0800
Subject: [PATCH 13/13] Remove sauce-connect hack.

---
 wct.conf.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/wct.conf.js b/wct.conf.js
index 5211f3e..46aeaf3 100644
--- a/wct.conf.js
+++ b/wct.conf.js
@@ -6,8 +6,6 @@ module.exports = {
         },
         sauce: {
             disabled: true,
-            // Remove this once https://github.com/Polymer/wct-sauce/pull/15 is fixed.
-            tunnelId: process.env.TRAVIS_JOB_NUMBER,
             browsers: [
                 {
                     "browserName": "chrome",