Skip to content

Commit

Permalink
Dev edition: hide implementer-facing text for custom elements
Browse files Browse the repository at this point in the history
  • Loading branch information
domenic committed Mar 8, 2018
1 parent 9c0619a commit 8bc214a
Showing 1 changed file with 41 additions and 16 deletions.
57 changes: 41 additions & 16 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand All @@ -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> {
Expand Down Expand Up @@ -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>,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down

0 comments on commit 8bc214a

Please sign in to comment.