Skip to content

Instantly share code, notes, and snippets.

@blargism
Created August 10, 2022 20:44
Show Gist options
  • Save blargism/439f1532d10dd9f05fa0e838a2c4b3dd to your computer and use it in GitHub Desktop.
Save blargism/439f1532d10dd9f05fa0e838a2c4b3dd to your computer and use it in GitHub Desktop.
Basic Web Component
export default class ComponentClass extends HTMLElement {
constructor() {
super();
// set sane defaults if desired.
this._value = null;
}
get values() {
return this._value;
}
set values(value) {
this._value = value;
this.render();
}
connectedCallback() {
this.template = () => `<div></div>`;
this.init().then(() => {
this.render();
}).catch((e) => {
// handle errors
});
}
async init() {
// do fetches etc.
}
render() {
if (!this.template)
return;
// other captures
this.innerHTML = this.template();
}
}
customElements.define("component-name", ComponentClass);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment