Topic: MD Boostrap support for web components

chrislennon priority asked 1 year 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


class WebComponent extends HTMLElement {


    async connectedCallback() {

        this.innerHtml = "hello world"

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


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

chrislennon priority answered 1 year 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?

Grzegorz Bujański staff answered 1 year 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">


Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • 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