custom element with shadow dom

custom.element.js

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)