MENU


Defining Custom HTML Elements

The name of a custom element must be in lower case and include a hyphen. The element must extend the HTMLElement class.
RESETRUNFULL
<!DOCTYPE html><html><head></head><body>
    <script>
        customElements.define('my-animal',
            class extends HTMLElement {
                constructor() {
                    super();
                }
                connectedCallback(){                    // invoked when added to document
                    this.style.color = "brown";
                    this.style.border = "1px solid purple";
                    this.style.background = "yellow"
                    this.onclick = ()=>{
                        this.style.fontSize="99px";
                    };
                }
                disconnectedCallback(){                    // invoked when disconnected from DOM
                }
                adoptedCallback(){                    // invoked when moved to a new document
                }
                attribueChangedCallback(name, oldV, newV){                    // invoked when attributes are added,                     // removed or changed
                }
               static get observedAttributes() { return ['c', 'l']; }
            }
        );
    </script>
    <my-animal>Lucky</my-animal> is a nice dog. <br/>
    <my-animal>Brownie</my-animal> is a bad dog.</body></html>

(more info about custom elements in section 2.6.1.)