Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic Custom Element Example
// https://jsfiddle.net/thegreenhouseio/qjj9hvv9/
class HelloWorld extends HTMLElement {
constructor(name) {
super();
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