Skip to content
Permalink
Browse files

Add custom elements to HTML

This upstreams custom elements into the HTML Standard, instead of having
them be in a separate spec that monkeypatches HTML extensively. This
builds on previous work in whatwg/dom#204.

See https://rawgit.com/w3c/webcomponents/15a203c8393aef0df7223ab1d43406aa11a7e71e/spec/custom/index.html
for the source material, in particular the sections labeled "HTML+".
Most changes while upstreaming were editorial in nature, with the
following exceptions:

- Changes were made to the "element interface" section to nail down
  underspecified edge cases, and fix https://www.w3.org/Bugs/Public/show_bug.cgi?id=27877.
- Changes were made to the authoring conformance criteria for attributes
  on custom elements.

A notable change included in this upstreaming is that the order of
attributes created by the parser is now well-defined. See
w3c/webcomponents#474 for discussion, as well
as https://www.w3.org/Bugs/Public/show_bug.cgi?id=17871.
  • Loading branch information...
domenic committed Apr 6, 2016
1 parent a4fb976 commit 6e7eaa4bd2912965fd83766f99f984f249531f3a
Showing with 1,415 additions and 56 deletions.
  1. +2 −0 images/content-venn.svg
  2. +116 −0 images/custom-element-reactions.svg
  3. +1,297 −56 source
@@ -108,6 +108,7 @@
<li><code>var</code></li>
<li><code>video</code></li>
<li><code>wbr</code></li>
<li><span>custom tags</span></li>
<li><span>Text*</span></li>
</ul>
<p>* Under certain circumstances (see prose).</p>
@@ -256,6 +257,7 @@
<li><code>var</code></li>
<li><code>video</code></li>
<li><code>wbr</code></li>
<li><span>custom tags</span></li>
<li><span title="text content">Text</span>*</li>
</ul>
<p>* Under certain circumstances; see prose.</p>
@@ -0,0 +1,116 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 185">
<style>
text {
font-family: sans-serif;
font-size: 10px;
}

.custom-element-reaction-queue .reaction {
font-size: 8px;
text-anchor: middle;
}

.queue-in-stack rect {
fill: transparent;
stroke: darkgray;
}

line, path, rect {
stroke: black;
}
</style>

<defs>
<marker id="arrow" orient="auto" markerWidth="6" markerHeight="6" refX="5" refY="3">
<path d="M0,0 V6 L5,3 Z" fill="black"/>
</marker>
<marker id="circle" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
<circle cx="1.5" cy="1.5" r="1.5" fill="black"/>
</marker>
<marker id="diamond" markerWidth="6" markerHeight="10" refX="3" refY="10">
<path d="M3,0 L6,5 L3,10 L0,5 Z" fill="white" stroke="black"/>
</marker>
</defs>

<g class="custom-elements-reaction-stack" transform="translate(0.5,0)">
<text x="40" y="10" style="text-anchor: middle">custom element</text>
<text x="40" y="20" style="text-anchor: middle">reactions stack</text>

<line x1="0" x2="0" y1="30" y2="130"/>
<line x1="0" x2="80" y1="50" y2="50"/>
<line x1="0" x2="80" y1="70" y2="70"/>
<line x1="0" x2="80" y1="90" y2="90"/>
<line x1="0" x2="80" y1="110" y2="110"/>
<line x1="0" x2="80" y1="130" y2="130"/>
<line x1="80" x2="80" y1="130" y2="30"/>

<g class="queue-in-stack" transform="translate(0,50)">
<rect x="5" y="5" width="15" height="10" rx="2" ry="2"/>
<rect x="25" y="5" width="15" height="10" rx="2" ry="2"/>
</g>

<g class="queue-in-stack" transform="translate(0,70)">
<rect x="5" y="5" width="15" height="10" rx="2" ry="2"/>
<rect x="25" y="5" width="15" height="10" rx="2" ry="2"/>
<rect x="45" y="5" width="15" height="10" rx="2" ry="2"/>
<text x="65" y="14">⋯</text>
</g>

<g class="queue-in-stack" transform="translate(0,90)">
<rect x="5" y="5" width="15" height="10" rx="2" ry="2"/>
</g>

<g class="queue-in-stack" transform="translate(0,110)">
<rect x="5" y="5" width="15" height="10" rx="2" ry="2"/>
<rect x="25" y="5" width="15" height="10" rx="2" ry="2"/>
<rect x="45" y="5" width="15" height="10" rx="2" ry="2"/>
</g>
</g>

<path d="M80.5,80.5 L120,80.5" marker-start="url(#circle)" marker-end="url(#arrow)" />

<g class="element-queue" transform="translate(125,60)">
<text x="65" y="0" style="text-anchor: middle">element queue</text>
<rect x="0" y="5" width="154.5" height="30" fill="transparent"/>

<g class="element-queue-element" transform="translate(10,10)">
<rect x="0" y="0" width="35" height="20" rx="5" ry="5" fill="transparent"/>
<text x="18" y="14" style="text-anchor: middle">&lt;x-a&gt;</text>
</g>

<g class="element-queue-element" transform="translate(50,10)">
<rect x="0" y="0" width="35" height="20" rx="5" ry="5" fill="transparent"/>
<text x="18" y="14" style="text-anchor: middle">&lt;x-b&gt;</text>
</g>

<g class="element-queue-element" transform="translate(90,10)">
<rect x="0" y="0" width="35" height="20" rx="5" ry="5" fill="transparent"/>
<text x="18" y="14" style="text-anchor: middle">&lt;x-c&gt;</text>
</g>

<text x="135" y="24">⋯</text>
</g>

<path d="M192.5,100 C192.5,120 150,110 150,140" marker-start="url(#diamond)" marker-end="url(#arrow)" fill="transparent"/>

<g class="custom-element-reaction-queue" transform="translate(70,150)">
<text x="85" y="0" style="text-anchor: middle">custom element reaction queue</text>
<rect x="0" y="5" width="170" height="29.5" fill="transparent"/>

<text x="20" y="24" class="reaction">Upgrade</text>

<line x1="40" x2="40" y1="5" y2="35"/>

<text x="60" y="18" class="reaction">Attribute</text>
<text x="60" y="26" class="reaction">changed</text>

<line x1="80" x2="80" y1="5" y2="35"/>

<text x="100" y="18" class="reaction">Attribute</text>
<text x="100" y="26" class="reaction">changed</text>

<line x1="120" x2="120" y1="5" y2="35"/>

<text x="145" y="24" class="reaction">Connected</text>
</g>
</svg>

0 comments on commit 6e7eaa4

Please sign in to comment.
You can’t perform that action at this time.