RESOLVED：在评论中看到我的解决方案
TL;DR：无法触发bootstrap的JS，怀疑我导入的JS脚本有误
我一直在尝试让Bootstrap与我的自定义可重用Web组件一起正常工作，以便在所有页面上正常工作。（即：我的页脚和页眉组件）
值得注意的是，我无法触发页眉导航，它在一个小屏幕上折叠成一个汉堡包。我也无法让我的模态在按钮点击时触发，但我可能会将此归咎于没有为它编写其他JS。我怀疑旋转木马或任何其他动态元素是否会因此而工作。
我已经导入了所有相关的CSS（似乎可以工作），并且正在尝试导入所需行为所依赖的JS，但运气不佳。
下面是我对components/header.js文件所做的尝试，这允许我将任何HTML文件放到根文件夹中，这样我就可以轻松地重用它们，而不需要重复代码。

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);