Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Basic Custom Element Example
class HelloWorld extends HTMLElement {
constructor(name) {
this.subject = name || 'World';
// creates a Shadow DOM tree
this.root = this.attachShadow({ mode: 'closed' });
// run some code when the component is ready
// in this case insert our template into our component's DOM
connectedCallback() {
this.root.innerHTML = this.getTemplate();
// our component's template to display
getTemplate() {
return `<h1>Hello ${this.subject}!</h1>`;
// register our custom element
customElements.define('hello-world', HelloWorld);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.