Skip to content

Instantly share code, notes, and snippets.

@hemanth
Last active January 27, 2024 12:38
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hemanth/e6bb66141101b52a76fe to your computer and use it in GitHub Desktop.
Save hemanth/e6bb66141101b52a76fe to your computer and use it in GitHub Desktop.
Extend DOM elements ES6
class SmartButton extends HTMLButtonElement {
constructor() {}
}
let sb = new SmartButton();
document.body.appendChild(sb);
/*
I get the below error:
TypeError: Failed to execute 'appendChild'
on 'Node': parameter 1 is not of type 'Node'.
It needs a document.registerElement as well? :/
But then what's the whole point of extending, it can just do a Object.create()
*/
@NookieGrey
Copy link

class CustomElement extends HTMLElement {
    // Fires when an instance of the element is created.
    createdCallback() {

    };
    // Fires when an instance was inserted into the document.
    attachedCallback() {

    };
    // Fires when an instance was removed from the document.
    detachedCallback() {

    };
    // Fires when an attribute was added, removed, or updated.
    attributeChangedCallback(attr, oldVal, newVal) {

    };
}

document.registerElement('custom', CustomElement);

let element = document.createElement('custom');

document.body.appendChild(element);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment