<div class="container my-5">

​

​

  <h1>Hello World</h1>

​

  <button id="show-modal">Show modal</button>

  <br>

  <web-component>

​

  </web-component>

​

</div>

​

​

    class WebComponent extends HTMLElement {

​

      #modal

      async connectedCallback () {

​

        console.log('connected')

​

​

        this.#modal = document.getElementById('modal-form')

​

        const modalButton = document.getElementById('show-modal')

​

        modalButton.addEventListener("click", function (e) {

​

          console.log('showing the modal...')

          const mdbModal = new mdb.Modal(this.#modal)

          mdbModal.show()

        })

​

        this.innerHTML = "hello world from the web component"

​

      }

    }

​

customElements.define('web-component', WebComponent)

​