Injecting navbar using JavaScript breaks dropdown-CodePudding

I am trying to use bootstrap for a navbar on a website in a way that I can modify just one file for the navbar across the whole site. Everything is working except for the dropdown. I cannot seem to figure out why the dropdown is not working properly. Please help!

const headerTemplate = document.createElement('template');

headerTemplate.innerHTML = `
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512- 4zCK9k qNFUR5X cKL9EIR ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
  <link rel="stylesheet" href="style/header.css" />-->

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="assets/SECURUS LOGO 2021 Left.jpg" alt="Logo" style="width:100px;" class="">
        </a>
        <div class="container-fluid">
            <ul class="navbar-nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Services</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Link</a></li>
                        <li><a class="dropdown-item" href="#">Another link</a></li>
                        <li><a class="dropdown-item" href="#">A third link</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Employment</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
`;

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

  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'closed' });
    shadowRoot.appendChild(headerTemplate.content);
  }
}

customElements.define('header-component', Header);

CodePudding user response：

Actually UI-Libraries such as bootstrap, works on document elmenet and they don't access to shadow-dom, so first of all you need to append your content on the Dom not shadowDom, second you need to load bootstrap at the end of your page, if you have access to append a node on document you can do it independent of your component or as a workaround you can also do it after you connected your template to the Dom:

class Header extends HTMLElement {
    constructor() {
     super();
     this._contents = new DocumentFragment();
     this._contents.appendChild(headerTemplate.content.cloneNode(true));
    }

    connectedCallback() {
     this.appendChild(this._contents);
      // append bootstrap to the dom, its's better to use it out of your component
      // var script = document.createElement('script');
     // script.src ='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js';
     // document.body.append(script);
    }
}

CodePudding user response：

I found the answer to this question and another in one. @Mendi Barel's suggestion solved the problem. It's short, it's simple, it separates my code from my markup, and it works with bootstrap. How can I reuse a navigation bar on multiple pages?