Dev edition: hide implementer-facing text for custom elements

Author: domenic

source

@@ -65996,8 +65996,8 @@ console.log(plasticButton.outerHTML); // will output '<button is="plastic-but
 
   <p>After a <span>custom element</span> is <span data-x="create an element">created</span>,
   changing the value of the <code data-x="attr-is">is</code> attribute does not
-  change the element's behavior, as it is saved on the element as its <span
-  data-x="concept-element-is-value"><code data-x="">is</code> value</span>.</p>
+  change the element's behavior<span w-nodev>, as it is saved on the element as its <span
+  data-x="concept-element-is-value"><code data-x="">is</code> value</span></span>.</p>
 
   <p><span data-x="autonomous custom element">Autonomous custom elements</span> have the following
   element definition:</p>
@@ -66107,6 +66107,8 @@ console.log(plasticButton.outerHTML); // will output '&lt;button is="plastic-but
    data-x="">&lt;emotion-😍></code>.</p>
   </div>
 
+  <div w-nodev>
+
   <p>A <dfn>custom element definition</dfn> describes a <span>custom element</span> and consists
   of:</p>
 
@@ -66172,9 +66174,11 @@ console.log(plasticButton.outerHTML); // will output '&lt;button is="plastic-but
    <li><p>Return null.</p></li>
   </ol>
 
+  </div>
+
   <h4 id="custom-elements-api">The <code>CustomElementRegistry</code> interface</h4>
 
-  <p>Each <code>Window</code> object is associated with a unique instance of a
+  <p w-nodev>Each <code>Window</code> object is associated with a unique instance of a
   <code>CustomElementRegistry</code> object, allocated when the <code>Window</code> object is
   created.</p>
 
@@ -66183,9 +66187,11 @@ console.log(plasticButton.outerHTML); // will output '&lt;button is="plastic-but
   the <code>HTMLElement</code> interface, and there is exactly one <code>HTMLElement</code>
   interface per <code>Window</code> object.</p>
 
-  <p>The <dfn><code data-x="dom-window-customElements">customElements</code></dfn> attribute of the
-  <code>Window</code> interface must return the <code>CustomElementRegistry</code> object for that
-  <code>Window</code> object.</p>
+  <div w-nodev>
+
+  <p>The <dfn><code data-x="dom-window-customElements">customElements</code></dfn> attribute
+  of the <code>Window</code> interface must return the <code>CustomElementRegistry</code> object for
+  that <code>Window</code> object.</p>
 
   <pre class="idl">[Exposed=Window]
 interface <dfn>CustomElementRegistry</dfn> {
@@ -66215,6 +66221,8 @@ dictionary <dfn>ElementDefinitionOptions</dfn> {
   is used to implement the <code
   data-x="dom-CustomElementRegistry-whenDefined">whenDefined()</code> method.</p>
 
+  </div>
+
   <dl class="domintro">
    <dt><var>window</var> . <code data-x="dom-window-customElements">customElements</code> . <code
    subdfn data-x="dom-CustomElementRegistry-define">define</code>(<var>name</var>,
@@ -66261,9 +66269,11 @@ dictionary <dfn>ElementDefinitionOptions</dfn> {
 
   <p><dfn>Element definition</dfn> is a process of adding a <span>custom element definition</span>
   to the <code>CustomElementRegistry</code>. This is accomplished by the <code
-  data-x="dom-CustomElementRegistry-define">define()</code> method. When invoked, the <dfn><code
-  data-x="dom-CustomElementRegistry-define">define(<var>name</var>, <var>constructor</var>,
-  <var>options</var>)</code></dfn> method must run these steps:</p>
+  data-x="dom-CustomElementRegistry-define">define()</code> method. <span w-nodev>When invoked,
+  the <dfn><code data-x="dom-CustomElementRegistry-define">define(<var>name</var>,
+  <var>constructor</var>, <var>options</var>)</code></dfn> method must run these steps:</span></p>
+
+  <div w-nodev>
 
   <ol>
    <li><p>If <span>IsConstructor</span>(<var>constructor</var>) is false, then throw a
@@ -66451,6 +66461,8 @@ dictionary <dfn>ElementDefinitionOptions</dfn> {
    <li><p>Return <var>promise</var>.</p></li>
   </ol>
 
+  </div>
+
   <div class="example">
    <p>The <code data-x="dom-CustomElementRegistry-whenDefined">whenDefined()</code> method can be
    used to avoid performing an action until all appropriate <span data-x="custom element">custom
@@ -66476,6 +66488,8 @@ fetch(articleURL)
   });</pre>
   </div>
 
+  <div w-nodev>
+
   <p>When invoked, the <dfn><code
   data-x="dom-CustomElementRegistry-upgrade">upgrade(<var>root</var>)</code></dfn> method must run
   these steps:</p>
@@ -66488,6 +66502,8 @@ fetch(articleURL)
    <span data-x="concept-try-upgrade">try to upgrade</span> <var>candidate</var>.</p></li>
   </ol>
 
+  </div>
+
   <div class="example">
    <p>The <code data-x="dom-CustomElementRegistry-upgrade">upgrade()</code> method allows upgrading
    of elements at will. Normally elements are automatically upgraded when they become
@@ -66505,6 +66521,8 @@ customElements.upgrade(el);
 console.assert(el instanceof SpiderMan);    // upgraded!</pre>
   </div>
 
+  <div w-nodev>
+
   <h4><dfn data-x="custom-element-upgrades">Upgrades</dfn></h4>
 
   <p>To <dfn data-x="concept-upgrade-an-element" data-export="">upgrade an element</dfn>, given as
@@ -66654,6 +66672,8 @@ customElements.define("x-foo", class extends HTMLElement {
    reaction</span> given <var>element</var> and <var>definition</var>.</p></li>
   </ol>
 
+  </div>
+
   <h4 id="custom-element-reactions">Custom element reactions</h4>
 
   <p>A <span>custom element</span> possesses the ability to respond to certain occurrences by
@@ -66694,13 +66714,16 @@ customElements.define("x-foo", class extends HTMLElement {
   data-x="concept-range">range</span> manipulation), they will instead be delayed until after all
   the relevant user agent processing steps have completed, and then run together as a batch.</p>
 
-  <p>Additionally, the precise ordering of these reactions is managed via a somewhat-complicated
-  stack-of-queues system, described below. The intention behind this system is to guarantee that
-  <span data-x="concept-custom-element-reaction">custom element reactions</span> always are invoked
-  in the same order as their triggering actions, at least within the local context of a single
-  <span>custom element</span>. (Because <span data-x="concept-custom-element-reaction">custom
-  element reaction</span> code can perform its own mutations, it is not possible to give a global
-  ordering guarantee across multiple elements.)</p>
+  <p><span w-nodev>Additionally, the precise ordering of these reactions is managed via a
+  somewhat-complicated stack-of-queues system, described below. The intention behind this system is
+  to guarantee</span><span w-nohtml>It is guaranteed</span> that <span
+  data-x="concept-custom-element-reaction">custom element reactions</span> always are invoked in the
+  same order as their triggering actions, at least within the local context of a single <span>custom
+  element</span>. (Because <span data-x="concept-custom-element-reaction">custom element
+  reaction</span> code can perform its own mutations, it is not possible to give a global ordering
+  guarantee across multiple elements.)</p>
+
+  <div w-nodev>
 
   <hr>
 
@@ -66928,6 +66951,8 @@ customElements.define("x-foo", class extends HTMLElement {
    </ul>
   </div>
 
+  </div>
+
 
   <h3 split-filename="semantics-other" id="common-idioms">Common idioms without dedicated elements</h3>