Skip to content

Instantly share code, notes, and snippets.

@argyleink
Last active September 12, 2022 12:00
Show Gist options
  • Save argyleink/ce927517e6b54aa67af0923512cac1be to your computer and use it in GitHub Desktop.
Save argyleink/ce927517e6b54aa67af0923512cac1be to your computer and use it in GitHub Desktop.
custom element with shadow dom
export default class CustomElement extends HTMLElement {
constructor() {
super()
this.$shadow = this.attachShadow()
this.$shadow.innerHTML = this.render()
}
connectedCallback() {}
disconnectedCallback() {}
render() {
return `
${this.styles()}
<div>Custom Element</div>
`
}
styles() {
return `
<style>
:host {
display: flex;
}
:host([hidden]) {
display: none;
}
</style>
`
}
}
customElements.define('custom-element', CustomElement)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment