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 typo in '2.1.1 Creating a custom tag' #446

Closed
wants to merge 1 commit into from
Closed

Fix typo in '2.1.1 Creating a custom tag' #446

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
4 changes: 2 additions & 2 deletions spec/custom/index.html
View file
Open in desktop
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>
document.registerElement("flag-icon", FlagIcon);</pre>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't right. We should be using window.customElements.define instead.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree. But if you check window.customElements in browser then it isn't define yet. But, document.registerElement at least is present in Firefox and Chrome. For the shake of the example let's consider use registerElement. After all by using registerElement the example will work in some way.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The example should reflect the specification, not the current implementations in browsers.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you're right! This interface 2.4 The CustomElementsRegistry interface should be used.

Anyway. Will be great if other developers will read an example that works. The introduction section is non-normative after all. So, today we can read an example that works and allows us to understand the meaning of custom components.


<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>
document.registerElement("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