Skip to content

Commit

Permalink
Update custom element examples to use new define function
Browse files Browse the repository at this point in the history
Re-fixes #431. Closes #446. Also updates acknowledgments to be easier to
maintain, and adds @rniwa who was missing (in addition to @rianby64 who
spotted this and proposed #446).
  • Loading branch information
domenic committed Mar 17, 2016
1 parent 1148e56 commit d0f7fec
Showing 1 changed file with 25 additions and 3 deletions.
28 changes: 25 additions & 3 deletions spec/custom/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ <h4 id="custom-elements-custom-tag-example">Creating a custom tag</h4>
<p>We then need to use this class to define the element:</p>

<pre class="highlight">
document.defineElement("flag-icon", FlagIcon);</pre>
customElements.define("flag-icon", FlagIcon);</pre>

<p>At this point, our above code will work! The parser, whenever it sees the <code>flag-icon</code> tag, will construct a new instance of our <code>FlagIcon</code> class, and tell our code about its new <code>country</code> attribute, which we then use to set the element's internal state and update its rendering (when appropriate).</p>

Expand Down Expand Up @@ -219,7 +219,7 @@ <h4 id="custom-elements-type-extension-example">Creating a type extension</h4>
<p>When registering our custom element, we have to also specify the <code>extends</code> option:</p>

<pre class="highlight">
document.defineElement("plastic-button", PlasticButton, { extends: "button" });</pre>
customElements.define("plastic-button", PlasticButton, { extends: "button" });</pre>

<p>In general, the name of the element being extended cannot be determined simply by looking at what element interface it extends, as many elements share the same interface (such as <code>q</code> and <code>blockquote</code> both sharing <code>HTMLQuoteElement</code>).</p>

Expand Down Expand Up @@ -1139,7 +1139,29 @@ <h2>Acknowledgments</h2>
<p>The &lt;flag-icon> example was inspired by <a itemprop="work" href="https://customelements.io/stevenrskelton/flag-icon/">a custom element</a> by <a itemprop="https://creativecommons.org/ns#attributionURL" href="http://stevenskelton.ca/">Steven Skelton</a>. (<a itemprop="license" href="https://opensource.org/licenses/MIT">MIT</a>)</p>
</div>

<p>The editor would also like to thank <span class="vcard">Alex Komoroske</span>, <span class="vcard">Anne van Kesteren</span>, <span class="vcard">Boris Zbarsky</span>, <span class="vcard">Daniel Buchner</span>, <span class="vcard">Edward O'Connor</span>, <span class="vcard">Erik Arvidsson</span>, <span class="vcard">Elliott Sprehn</span>, <span class="vcard">Hayato Ito</span>, <span class="vcard">Jan Miksovsky</span>, <span class="vcard">Jonas Sicking</span>, <span class="vcard">Olli Pettay</span>, <span class="vcard">Rafael Weinstein</span>, <span class="vcard">Scott Miles</span>, <span class="vcard">Simon Pieters</span>, <span class="vcard">Steve Orvell</span>, <span class="vcard">Tab Atkins</span>, and <span class="vcard">William Chen</span> for their comments and contributions to this specification.</p>
<p>The editor would also like to thank
Alex Komoroske,
Andres Rios,
Anne van Kesteren,
Boris Zbarsky,
Daniel Buchner,
Edward O'Connor,
Erik Arvidsson,
Elliott Sprehn,
Hayato Ito,
Jan Miksovsky,
Jonas Sicking,
Olli Pettay,
Rafael Weinstein,
Ryosuke Niwa,
Scott Miles,
Simon Pieters,
Steve Orvell,
Tab Atkins,
and
William Chen

for their comments and contributions to this specification.</p>

<p>This list is too short. There's a lot of work left to do. Please contribute by reviewing and filing bugs&mdash;and don't forget to ask the editor to add your name into this section.</p>

Expand Down

0 comments on commit d0f7fec

Please sign in to comment.