Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix example of "undefined" custom element state #266

Merged
merged 1 commit into from
Jun 7, 2016
Merged

Fix example of "undefined" custom element state #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions dom.bs
View file
Open in desktop
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
Open in desktop
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