Despite doing this front-end thing for over a decade, I still encounter new problems thanks to the ever-evolving web specifications. One of the newer specifications is Web Components.
Now, my situation was I wanted to see Bootstrap 5 Javascript components. Because of the closed-wall nature of Shadow DOM means, the global approach Bootstrap takes by default will not work for components.
Fortunately, it is possible to use Bootstrap components with Shadow DOM, albeit programmatically.
import { Dropdown } from 'bootstrap';
const dropdownElement = this.element.shadowRoot.querySelector(".dropdown-toggle-product");
const dropdown = new Dropdown(dropdownElement);In my example, I am using Aurelia 2, but the premise is the same. You access the shadowRoot of the element that contains the markup, you want to enable Bootstrap on. It’s a new paradigm, shadowRoot becomes the document
You probably want to ensure your components are in open mode, as I haven’t tested if this approach would even work in closed mode (presumably not).
