Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.