MD Boostrap support for web components


Topic: MD Boostrap support for web components

chrislennon pro premium priority asked 2 years ago

I am getting some strange errors when I try to use web components with MD Bootstrap

Does MDBootstrap support web components?

I did a snippet to illustrate, but the snippet won't even really run - given an illegal invocation error https://mdbootstrap.com/snippets/standard/chrislennon/4251215

Code

class WebComponent extends HTMLElement {

    #modal

    async connectedCallback() {

        this.innerHtml = "hello world"

        this.#modal = document.getElementById("modal")
        const modalInstance = new mdb.Modal(this.#modal)
        modalInstance.show()
    }

}

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

Grzegorz Bujański staff answered 2 years ago

Modal requires a .modal-dialog element. In HTML code try adding a .modal-dialog element. This should help

    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-mdb-backdrop="false" data-mdb-keyboard="true">
        <div class="modal-dialog">

        </div>
    </div>

chrislennon pro premium priority answered 2 years ago

Thanks. I get lots and lots of errors in the snippet editor when I work with web components but saving the snippet then refreshing the page seems to work.

I have updated the snippet. If you click 'show modal' the modal should display. Instead an error shows:

Uncaught TypeError: Cannot read private member #modal from an object whose class did not declare it
    at HTMLButtonElement.<anonymous> 

I can work around this error by not using class level variables (public or private) to store elements outside of the web component. However our pattern is to store these elements as class level elements.

Why does this error appear in the snippet when you click the "Show Modal" button?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.4.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes