Topic: MD Boostrap support for web components
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)
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>
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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