RESOLVED: the solution is in a comment
TL;DR: Issues triggering Bootstrap's JS, likely due to incorrect import of JS scripts
I've been working on integrating Bootstrap with my custom reusable web components across all pages. Specifically, I'm facing challenges with getting the header navigation, which collapses into a hamburger icon on small screens, to function properly. Additionally, I'm unable to trigger my modals on button click, potentially because I haven't written additional JS for them. I suspect that dynamic elements like carousels may not work either.
I've successfully imported all necessary CSS, but importing the required JS for desired functionality has proven tricky.
In my components/header.js file, I've attempted the following code snippet. This setup allows me to easily reuse this code in any HTML files within the root folder:
headerTemplate.innerHTML = `
<style>
@import url("https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");
</style>
<header>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js”></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
// Rest of the header HTML code goes here...
`;
class Header extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const shadowRoot = this.attachShadow({ mode: 'closed' });
shadowRoot.appendChild(headerTemplate.content);
}
}
customElements.define('header-component', Header);