Merge pull request #3 from dglazkov/example

Example

spec/custom/index.html

@@ -531,11 +531,21 @@ <h3 id="extensions-to-document-interface-to-register">Extensions to <a href="htt
         },
         // specify more members for your prototype.
         // ...
-    })
+    }),
+    extends: 'p'
 });
 
+</code></pre>
+<p>Note the use of <code>extends</code> option to specify that the element is being registered as a <a href="#dfn-type-extension">type extension</a> -- that is, this element does not introduce a new tag (like the <a href="#dfn-custom-tag">custom tag</a> elements do), but rather extends an existing element of type <strong>HTMLParagraphElement</strong>. Here's how one could instantiate this element:</p>
+<pre><code class="prettyprint">
+&lt;p is="x-foo"&gt;Paragraph of amazement&lt;/p&gt;
+</code></pre>
+Or imperatively, in JavaScript:
+<pre><code class="prettyprint">
+var foo = document.createElement('p', 'x-foo');
 </code></pre>
 </div>
+<p>Elements with <code>SVGElement</code> prototype deserve a special mention: using <a href="#dfn-custom-tag">custom tag</a> approach results in <a href="http://www.w3.org/TR/SVG11/extend.html#ForeignNamespaces">ignored elements</a> in SVG. Thus, your SVG-based custom elements would almost always be <a href="#dfn-type-extension">type extensions</a>.</p>
 
 <h3 id="unresolved-element-pseudoclass">Unresolved Element Pseudoclass</h3>