Take care of missing custom element reactions

As discussed in WICG/webcomponents#186, there
are certain scenarios where custom element reactions could be enqueued,
but the custom element reactions stack is empty. The most prominent of
these is editing operations.

We solve this issue in two parts:

- First, introduce the backup element queue (similar to the old "base
element queue" concept; see
WICG/webcomponents#457). This takes care of
cases like editing which cannot be solved in any other way.
- Also, we mandate that [CEReactions] be applied to nonstandard APIs
that modify the DOM, including a list of what we've identified so far.

Closes WICG/webcomponents#186.

Author: domenic

images/custom-element-reactions.svg

@@ -3104,6 +3104,7 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
      <li><dfn data-noexport="" data-x-href="https://dom.spec.whatwg.org/#interface-node"><code>Node</code></dfn> interface</li>
      <li><dfn data-noexport="" data-x-href="https://dom.spec.whatwg.org/#interface-nodelist"><code>NodeList</code></dfn> interface</li>
      <li><dfn data-noexport="" data-x-href="https://dom.spec.whatwg.org/#interface-processinginstruction"><code>ProcessingInstruction</code></dfn> interface</li>
+     <li><dfn data-x-href="https://dom.spec.whatwg.org/#interface-shadowroot"><code>ShadowRoot</code></dfn> interface</li>
      <li><dfn data-noexport="" data-x-href="https://dom.spec.whatwg.org/#interface-text"><code>Text</code></dfn> interface</li>
 
      <li><dfn data-noexport="" data-x-href="https://dom.spec.whatwg.org/#concept-node-document">node document</dfn> concept</li>
@@ -66841,13 +66842,23 @@ customElements.define("x-foo", class extends HTMLElement {
   <hr>
 
   <p>Each <span>unit of related similar-origin browsing contexts</span> has a <dfn>custom element
-  reactions stack</dfn>, which is initially empty. Each item in the stack is an <dfn>element
-  queue</dfn>, which is initially empty as well; the <span>element queue</span> at the top of the
-  stack is called the <dfn>current element queue</dfn>. Each item in an <span>element queue</span>
-  is an element. (The elements are not necessarily <span
+  reactions stack</dfn>, which is initially empty. The <dfn>current element queue</dfn> is the
+  <span>element queue</span> at the top of the <span>custom element reactions stack</span>. Each
+  item in the stack is an <dfn>element queue</dfn>, which is initially empty as well. Each item in
+  an <span>element queue</span> is an element. (The elements are not necessarily <span
   data-x="concept-element-custom">custom</span> yet, since this queue is used for <span
   data-x="custom-element-upgrades">upgrades</span> as well.)</p>
 
+  <p>Each <span>custom element reactions stack</span> has an associated <dfn>backup element
+  queue</dfn>, which an initially-empty <span>element queue</span>. Elements are pushed onto the
+  <span>backup element queue</span> during operations that affect the DOM without going through an
+  API decorated with <code data-x="CEReactions">[CEReactions]</code>, or through the parser's
+  <span>create an element for the token</span> algorithm. An example of this is a user-initiated
+  editing operation which modifies the descendants or attributes of an <span>editable</span>
+  element. To prevent reentrancy when processing the <span>backup element queue</span>, each
+  <span>custom element reactions stack</span> also has a <dfn>processing the backup element
+  queue</dfn> flag, initially unset.</p>
+
   <p>All elements have an associated <dfn>custom element reaction queue</dfn>, initially empty. Each
   item in the <span>custom element reaction queue</span> is of one of two types:</p>
 
@@ -66862,7 +66873,38 @@ customElements.define("x-foo", class extends HTMLElement {
 
   <p>This is all summarised in the following schematic diagram:</p>
 
-  <p><img src="/images/custom-element-reactions.svg" style="width: 80%; max-width: 560px;" alt="A custom elements reaction stack consists of a stack of element queues. Zooming in on a particular queue, we see that it contains a number of elements (in our example, &lt;x-a&gt;, then &lt;x-b&gt;, then &lt;x-c&gt;). Any particular element in the queue then has a custom element reaction queue. Zooming in on the custom element reaction queue, we see that it contains a variety of queued-up reactions (in our example, upgrade, then attribute changed, then another attribute changed, then connected)."></p>
+  <p><img src="/images/custom-element-reactions.svg" style="width: 80%; max-width: 580px;" alt="A custom element reactions stack consists of a stack of element queues. Zooming in on a particular queue, we see that it contains a number of elements (in our example, &lt;x-a&gt;, then &lt;x-b&gt;, then &lt;x-c&gt;). Any particular element in the queue then has a custom element reaction queue. Zooming in on the custom element reaction queue, we see that it contains a variety of queued-up reactions (in our example, upgrade, then attribute changed, then another attribute changed, then connected)."></p>
+
+  <p>To <dfn>enqueue an element on the appropriate element queue</dfn>, given an element
+  <var>element</var>, run the following steps:</p>
+
+  <ol>
+   <li>
+    <p>If the <span>custom element reactions stack</span> is empty, then:</p>
+
+    <ol>
+     <li><p>Add <var>element</var> to the <span>backup element queue</span>.</p></li>
+
+     <li><p>If the <span>processing the backup element queue</span> flag is set, abort this
+     algorithm.</p></li>
+
+     <li><p>Set the <span>processing the backup element queue</span> flag.</p></li>
+
+     <li>
+      <p><span>Queue a microtask</span> to perform the following steps:</p>
+
+      <ol>
+       <li><p><span>Invoke custom element reactions</span> in the <span>backup element
+       queue</span>.</p></li>
+
+       <li><p>Unset the <span>processing the backup element queue</span> flag.</p></li>
+      </ol>
+     </li>
+    </ol>
+   </li>
+
+   <li><p>Otherwise, add <var>element</var> to the <span>current element queue</span>.</p></li>
+  </ol>
 
   <p>To <dfn data-export="">enqueue a custom element callback reaction</dfn>, given a <span>custom
   element</span> <var>element</var>, a callback name <var>callbackName</var>, and a list of
@@ -66903,7 +66945,8 @@ customElements.define("x-foo", class extends HTMLElement {
    reaction queue</span>, with callback function <var>callback</var> and arguments
    <var>args</var>.</p></li>
 
-   <li><p>Add <var>element</var> to the <span>current element queue</span>.</p></li>
+   <li><p><span>Enqueue an element on the appropriate element queue</span> given
+   <var>element</var>.</p></li>
   </ol>
 
   <p>To <dfn data-export="">enqueue a custom element upgrade reaction</dfn>, given an element
@@ -66915,7 +66958,8 @@ customElements.define("x-foo", class extends HTMLElement {
    reaction queue</span>, with <span>custom element definition</span>
    <var>definition</var>.</p></li>
 
-   <li><p>Add <var>element</var> to the <span>current element queue</span>.</p></li>
+   <li><p><span>Enqueue an element on the appropriate element queue</span> given
+   <var>element</var>.</p></li>
   </ol>
 
   <p>To <dfn>invoke custom element reactions</dfn> in an <span>element queue</span>
@@ -66999,6 +67043,30 @@ customElements.define("x-foo", class extends HTMLElement {
    and helping implementations easily pinpoint all cases where these steps are necessary.</p>
   </div>
 
+  <p>Any nonstandard APIs introduced by the user agent that could modify the DOM in such a way as to
+  cause <span data-x="enqueue a custom element callback reaction">enqueuing a custom element
+  callback reaction</span> or <span data-x="enqueue a custom element upgrade reaction">enqueuing a
+  custom element upgrade reaction</span>, for example by modifying any attributes or child elements,
+  must also be decorated with the <code data-x="CEReactions">[CEReactions]</code> attribute.</p>
+
+  <div class="note">
+   <p>As of the time of this writing, the following nonstandard or not-yet-standardized APIs are
+   known to fall into this category:</p>
+
+   <ul>
+    <li><p><code>HTMLElement</code>'s <code data-x="">innerText</code> and <code
+    data-x="">outerText</code> IDL attributes</p></li>
+
+    <li><p><code>HTMLInputElement</code>'s <code data-x="">webkitdirectory</code> and <code
+    data-x="">incremental</code> IDL attributes</p></li>
+
+    <li><p><code>HTMLLinkElement</code>'s <code data-x="">disabled</code> and <code
+    data-x="">scope</code> IDL attributes</p></li>
+
+    <li><p><code>ShadowRoot</code>'s <code data-x="">innerHTML</code> IDL attribute</p></li>
+   </ul>
+  </div>
+
 
 <!--TOPIC:HTML-->
   <h3 id="common-idioms">Common idioms without dedicated elements</h3>