RESOLVED: see my solution in a comment

TL;DR: Can t get bootstrap s JS to trigger, suspect that I m importing the JS scripts wrong

I ve been trying to get Bootstrap to work properly with my custom reusable web components to work properly across all pages. (i.e.: my footer and header components)

Notably, I can t get the header nav, which collapses into a hamburger in a small screen, to trigger. I also can t get my modals to trigger on button click, but I could potentially pin this on not having other JS written for it. I doubt that carousels or any other dynamic elements would work due to this.

I ve imported all relevant CSS (which seems to work), and am trying to also import the JS that the desired behavior depends on, but haven t had much luck.

Here is what I ve been trying for my components/header.js file. This allows me to put to any of my HTML files in the root folder, so that I can easily reuse without duplicate code.

headerTemplate.innerHTML = `
<style> 
    @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css");
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/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@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand nav-link active" href="index.html">Sample</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                    <a class="nav-link" href="listings.html">Listings</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="listings.html">Listings</a>
                    </li> 
                    <li class="nav-item">
                    <a class="nav-link" href="listings.html">Listings</a>
                    </li>
               </ul>
               <div>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal"> Login</button>
                    <button class="btn btn-outline-primary onclick="location.href= settings.html " type="submit">Settings</button> 
                </div>
            </div>
        </div>
    </nav>
</header>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Done</button>
        </div>
        </div>
    </div>
</div>
`;

class Header extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        const shadowRoot = this.attachShadow({ mode:  closed  });

        shadowRoot.appendChild(headerTemplate.content);
    }
}

customElements.define( header-component , Header);