add dialogmodaltarget attribute

Author: keithamus

source

@@ -45686,7 +45686,8 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
 
   // <a href="#HTMLInputElement-partial">also has obsolete members</a>
 };
-<span>HTMLInputElement</span> includes <span>PopoverInvokerElement</span>;</code></pre>
+<span>HTMLInputElement</span> includes <span>PopoverInvokerElement</span>;
+<span>HTMLInputElement</span> includes <span>DialogInvokerElement</span>;</code></pre>
    </dd>
    <dd w-dev>Uses <code>HTMLInputElement</code>.</dd>
   </dl>
@@ -52101,7 +52102,8 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
 
   readonly attribute <span>NodeList</span> <span data-x="dom-lfe-labels">labels</span>;
 };
-<span>HTMLButtonElement</span> includes <span>PopoverInvokerElement</span>;</code></pre>
+<span>HTMLButtonElement</span> includes <span>PopoverInvokerElement</span>;
+<span>HTMLButtonElement</span> includes <span>DialogInvokerElement</span>;</code></pre>
    </dd>
    <dd w-dev>Uses <code>HTMLButtonElement</code>.</dd>
   </dl>
@@ -60365,6 +60367,85 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <h4 id="the-dialogmodal-target-attributes">The dialogmodal target attributes</h4>
+
+  <p><span data-x="concept-button">Buttons</span> may have the following content attributes:</p>
+
+  <ul>
+   <li><p><dfn element-attr for="html-global"><code
+   data-x="attr-dialogmodaltarget">dialogmoddaltarget</code></dfn></p></li>
+  </ul>
+
+  <p>If specified, the <code data-x="attr-dialogmodaltarget">dialogmodaltarget</code> attribute value must
+  be the <span data-x="concept-ID">ID</span> of a <span data-x="dialog">dialog</span> element
+  in the same <span>tree</span> as the <span data-x="concept-button">button</span> with the
+  <code data-x="attr-dialogmodaltarget">dialogmodaltarget</code> attribute.</p>
+
+  <div class="example">
+   <p>The following shows how the <code data-x="attr-dialogmodaltarget">dialogmodaltarget</code> attribute
+   can be used to show and close a dialog:</p>
+
+   <pre><code class="html">&lt;button dialogmodaltarget="foo">
+  Show a dialog (modal)
+&lt;/button>
+
+&lt;dialog id="foo">
+  This is a dialog!
+  &lt;button dialogmodaltarget="foo">Close&lt;/button>
+&lt;/article></code></pre>
+  </div>
+
+  <span data-x="concept-element-dom">DOM interface</span>:
+  <pre><code class="idl">interface mixin <dfn interface>DialogInvokerElement</dfn> {
+  [<span>CEReactions</span>] attribute Element? <span data-x="dom-dialogModalTargetElement">dialogModalTargetElement</span>;
+};</code></pre>
+
+  <p>The <dfn attribute for="HTMLElement"><code
+  data-x="dom-dialogModalTargetElement">dialogModalTargetElement</code></dfn> IDL attribute must
+  <span>reflect</span> the <code data-x="attr-dialogmodaltarget">dialogmodaltarget</code> attribute.</p>
+
+  <p>To run the <dfn>dialog modal target attribute activation behavior</dfn> given a <code>Node</code>
+  <var>node</var>:</p>
+
+  <ol>
+   <li><p>Let <var>dialog</var> be <var>node</var>'s <span>dialog modal target element</span>.</p></li>
+
+   <li><p>If <var>dialog</var> is null, then return.</p></li>
+
+   <li><p>If the <code data-x="attr-dialog-open">open</code> attribute is set on <var>node</var>
+   then:
+
+    <ol>
+     <li><p>Run <code data-x="dom-dialog-close">close()</code></p> on <var>node</var></li>
+     <li><p>Otherwise, run <code data-x="dom-dialog-showmodal">showModal()</code> on <var>node</var></li>
+    </ol>
+
+   </li>
+  </ol>
+
+  <p>To get the <dfn>dialog modal target element</dfn> given a <code>Node</code> <var>node</var>, perform
+  the following steps. They return an <span data-x="HTML elements">HTML element</span> or null.</p>
+
+  <ol>
+   <li><p>If <var>node</var> is not a <span data-x="concept-button">button</span>, then return
+   null.</p></li>
+
+   <li><p>If <var>node</var> is <span data-x="concept-fe-disabled">disabled</span>, then return
+   null.</p></li>
+
+   <li><p>If <var>node</var> has a <span>form owner</span> and <var>node</var> is a <span
+   data-x="concept-submit-button">submit button</span>, then return null.</p></li>
+
+   <li><p>Let <var>dialogElement</var> be <var>node</var>'s <span data-x="attr-associated
+   element"><code data-x="">dialogmodaltarget</code>-associated element</span>.</p></li>
+
+   <li><p>If <var>dialogElement</var> is null, then return null.</p></li>
+
+   <li><p>If <var>dialogElement</var> is not a <code data-x="dialog">dialog</code> element, then return null.</p></li>
+
+   <li><p>Return <var>dialogElement</var>.</p></li>
+  </ol>
+
 
   <h4 id="the-script-element">The <dfn
   id="script" element><code>script</code></dfn> element</h4>