Skip to content

Commit

Permalink
Fix example of "undefined" custom element state
Browse files Browse the repository at this point in the history 
whatwg/html#1297 led to a series of changes
which cause the custom element state to be set to "defined" by the
HTMLElement constructor. This invalidates the super()-then-throw
example. We instead replace it with an example that fails to call
super().

Fixes whatwg/html#1396.
  • Loading branch information
@domenic @annevk
domenic authored and annevk committed Jun 7, 2016
1 parent 42a45eb commit 00250fc
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 156 deletions.
3 changes: 1 addition & 2 deletions dom.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5611,8 +5611,7 @@ behavior of the <a href=#mutation-algorithms>mutation algorithms</a>.</p>
window.customElements.define("sw-finn", class extends HTMLElement {}, { extends: "p" })
window.customElements.define("sw-kylo", class extends HTMLElement {
constructor() {
super()
throw new Error("The droid... stole a freighter?")
// super() intentionally omitted for this example
}
})
&lt;/script>
Expand Down
159 changes: 5 additions & 154 deletions dom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,6 @@
<link href="https://resources.whatwg.org/bikeshed.css" rel="stylesheet">
<link href="https://resources.whatwg.org/logo-dom.svg" rel="icon">
<meta content="Bikeshed 1.0.0" name="generator">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
regarding paragraph and lists. */
[data-md] > :first-child {
margin-top: 0;
}
[data-md] > :last-child {
margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
counter-reset: example figure issue;
}
.issue {
counter-increment: issue;
}
.issue:not(.no-marker)::before {
content: "Issue " counter(issue);
}

.example {
counter-increment: example;
}
.example:not(.no-marker)::before {
content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
content: "Invalid Example" counter(example);
}

figure {
counter-increment: figure;
}
figcaption:not(.no-marker)::before {
content: "Figure " counter(figure);
}</style>
<style>/* style-syntax-highlighting */
.highlight .hll { background-color: #ffffcc }
.highlight { background: #ffffff; }
Expand Down Expand Up @@ -106,114 +67,6 @@
code.highlight { padding: .1em; border-radius: .3em; }
xmp.highlight, pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
position: relative;
}
a.self-link {
position: absolute;
top: 0;
left: calc(-1 * (3.5rem - 26px));
width: calc(3.5rem - 26px);
height: 2em;
text-align: center;
border: none;
transition: opacity .2s;
opacity: .5;
}
a.self-link:hover {
opacity: 1;
}
.heading > a.self-link {
font-size: 83%;
}
li > a.self-link {
left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
top: auto;
left: auto;
opacity: 0;
width: 1.5em;
height: 1.5em;
background: gray;
color: white;
font-style: normal;
transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
opacity: 1;
}
dfn > a.self-link:hover {
color: black;
}

a.self-link::before { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
color: #005a9c;
font-size: inherit;
font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
content: "‘";
}
.css::after, .property::after, .descriptor::after {
content: "’";
}
.property, .descriptor {
/* Don't wrap property and descriptor names */
white-space: nowrap;
}
.type { /* CSS value <type> */
font-style: italic;
}
pre .property::before, pre .property::after {
content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after { content: ">" }

[data-link-type=biblio] {
white-space: pre;
}</style>
<body class="h-entry status-LS">
<div class="head">
<p data-fill-with="logo"><a class="logo" href="https://whatwg.org/"> <img alt="WHATWG" height="100" src="https://resources.whatwg.org/logo-dom.svg"> </a> </p>
Expand Down Expand Up @@ -2726,7 +2579,7 @@ <h3 class="heading settled" data-level="4.4" id="interface-node"><span class="se
</ol>
<p>When invoked with the same argument, and as long as <var>root</var>’s <a data-link-type="dfn" href="#concept-node-document">node document</a>’s <a data-link-type="dfn" href="#concept-document-type">type</a> has not changed, the same <code class="idl"><a data-link-type="idl" href="#htmlcollection">HTMLCollection</a></code> object may be returned as
returned by an earlier call. </p>
<p>The <dfn data-dfn-type="dfn" data-export="" id="concept-getelementsbytagnamens">list of elements with namespace <var>namespace</var> and local name <var>localName</var><a class="self-link" href="#concept-getelementsbytagnamens"></a></dfn> for a <a data-link-type="dfn" href="#concept-node">node</a> <var>root</var> is the <code class="idl"><a data-link-type="idl" href="#htmlcollection">HTMLCollection</a></code> returned by the following algorithm:</p>
<p>The <dfn data-dfn-type="dfn" data-export="" data-lt="list of elements with namespace namespace and local name localName" id="concept-getelementsbytagnamens">list of elements with namespace <var>namespace</var> and local name <var>localName</var><a class="self-link" href="#concept-getelementsbytagnamens"></a></dfn> for a <a data-link-type="dfn" href="#concept-node">node</a> <var>root</var> is the <code class="idl"><a data-link-type="idl" href="#htmlcollection">HTMLCollection</a></code> returned by the following algorithm:</p>
<ol>
<li>If <var>namespace</var> is the empty string, set it to null.
<li>If both <var>namespace</var> and <var>localName</var> are "<code>*</code>" (U+002A), return a <code class="idl"><a data-link-type="idl" href="#htmlcollection">HTMLCollection</a></code> rooted at <var>root</var>, whose filter matches <a data-link-type="dfn" href="#concept-tree-descendant">descendant</a> <a data-link-type="dfn" href="#concept-element">elements</a>.
Expand Down Expand Up @@ -3465,17 +3318,16 @@ <h3 class="heading settled" data-level="4.9" id="interface-element"><span class=
"<code>uncustomized</code>", or "<code>custom</code>". An <a data-link-type="dfn" href="#concept-element">element</a> whose <a data-link-type="dfn" href="#concept-element-custom-element-state">custom element state</a> is "<code>uncustomized</code>" or "<code>custom</code>" is said to be <dfn data-dfn-for="Element" data-dfn-type="dfn" data-export="" id="concept-element-defined">defined<a class="self-link" href="#concept-element-defined"></a></dfn>. An <a data-link-type="dfn" href="#concept-element">element</a> whose <a data-link-type="dfn" href="#concept-element-custom-element-state">custom element state</a> is "<code>custom</code>", is said to be <dfn data-dfn-for="Element" data-dfn-type="dfn" data-export="" id="concept-element-custom">custom<a class="self-link" href="#concept-element-custom"></a></dfn>. </p>
<p class="note" role="note">Whether or not an element is <a data-link-type="dfn" href="#concept-element-defined">defined</a> is used to determine the behavior of the <a class="css" data-link-type="maybe" href="https://html.spec.whatwg.org/multipage/scripting.html#selector-defined">:defined</a> pseudo-class. Whether or not an element is <a data-link-type="dfn" href="#concept-element-custom">custom</a> is used to determine the
behavior of the <a href="#mutation-algorithms">mutation algorithms</a>.</p>
<div class="example" id="example-f7401fd0">
<a class="self-link" href="#example-f7401fd0"></a>
<div class="example" id="example-dec16616">
<a class="self-link" href="#example-dec16616"></a>
<p>The following code illustrates elements in each of these three states:</p>
<pre><code class="lang-html highlight"><span class="cp">&lt;!DOCTYPE html></span>
<span class="nt">&lt;script></span>
<span class="nb">window</span><span class="p">.</span><span class="nx">customElements</span><span class="p">.</span><span class="nx">define</span><span class="p">(</span><span class="s2">"sw-rey"</span><span class="p">,</span> <span class="kr">class</span> <span class="kr">extends</span> <span class="nx">HTMLElement</span> <span class="p">{})</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">customElements</span><span class="p">.</span><span class="nx">define</span><span class="p">(</span><span class="s2">"sw-finn"</span><span class="p">,</span> <span class="kr">class</span> <span class="kr">extends</span> <span class="nx">HTMLElement</span> <span class="p">{},</span> <span class="p">{</span> <span class="kr">extends</span><span class="o">:</span> <span class="s2">"p"</span> <span class="p">})</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">customElements</span><span class="p">.</span><span class="nx">define</span><span class="p">(</span><span class="s2">"sw-kylo"</span><span class="p">,</span> <span class="kr">class</span> <span class="kr">extends</span> <span class="nx">HTMLElement</span> <span class="p">{</span>
<span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="kr">super</span><span class="p">()</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">"The droid... stole a freighter?"</span><span class="p">)</span>
<span class="c1">// super() intentionally omitted for this example</span>
<span class="p">}</span>
<span class="p">})</span>
<span class="nt">&lt;/script></span>
Expand Down Expand Up @@ -5981,8 +5833,7 @@ <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="c
<li><a href="#concept-light-tree">light tree</a><span>, in §4.2.2</span>
<li><a href="#concept-document-limited-quirks">limited-quirks mode</a><span>, in §4.5</span>
<li><a href="#concept-getelementsbyclassname">list of elements with class names classNames</a><span>, in §4.4</span>
<li><a href="#concept-getelementsbytagnamens">list of elements with namespace
namespace and local name localName</a><span>, in §4.4</span>
<li><a href="#concept-getelementsbytagnamens">list of elements with namespace namespace and local name localName</a><span>, in §4.4</span>
<li><a href="#concept-getelementsbytagname">list of elements with qualified name qualifiedName</a><span>, in §4.4</span>
<li><a href="#concept-collection-live">live</a><span>, in §4.2.10</span>
<li><a href="#concept-collection-live">live collection</a><span>, in §4.2.10</span>
Expand Down

0 comments on commit 00250fc

Please sign in to comment.