// 1. extend built-in element classFancyButtonextendsHTMLButtonElement { constructor(){...} }// 2. register new tagcustomElements.define('fancy-button', FancyButton, {extends:'button'});// 3. create with `document.createElement()`let button =document.createElement('button', {is:'fancy-button'});button.textContent ='Fancy button!';button.disabled =true;document.body.appendChild(button);// 4. create with `new`let button =newFancyButton();button.textContent ='Fancy button!';button.disabled =true;
<!-- 3. use `is` attribute -->
<p is="my-paragraph">some text</p>
The required third parameter {extends: p} tells the browser which tag you're extending. This is necessary because many HTML tags share the same DOM interface.
<section>, <address>, and <em> (among others) all share HTMLElement.
both <q> and <blockquote> share HTMLQuoteElement, etc..
Specifying {extends: 'blockquote'} lets the browser know you're creating a souped-up <blockquote> instead of a <q>.
๐ Google โฉ Extending native HTML elements