自定义Web Component中Bootstrap导航栏下拉功能失效问题求助

我明白你遇到的问题了——Web Component的Shadow DOM隔离特性导致Bootstrap的JS无法自动识别和初始化组件里的元素，而且模板里的<script>标签也不会被浏览器执行。下面是一步步的解决方案：

核心问题分析 #

1. Shadow DOM的隔离性：Bootstrap的自动初始化逻辑只会扫描主DOM树，不会深入到Shadow DOM内部查找带有data-bs-toggle等属性的元素。
2. 模板内脚本不执行：放在<template>里的<script>标签，当你把内容append到Shadow Root时，浏览器不会自动执行这些脚本，所以Bootstrap JS根本没在组件环境里加载生效。

解决方案步骤 #

1. 移除模板中的脚本引用 #

首先把模板里的所有<script>标签删掉，只保留CSS链接（CSS在Shadow DOM里可以正常加载生效）：

const headerTemplate = document.createElement('template');
headerTemplate.innerHTML = `
<link href="code/style.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- 你的导航栏和模态框HTML内容，保持不变 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/media/images/bt.svg" alt="" width="90" height="72">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- 导航栏列表内容... -->
</div>
</nav>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- 模态框内容... -->
</div>
`;

2. 在主页面全局引入Bootstrap和Popper JS #

把Bootstrap和Popper的JS脚本移到主HTML的<head>里，这样它们会在全局环境中加载，让我们可以在Web Component里调用Bootstrap的API：

<!DOCTYPE HTML>
<html lang="de-DE">
<head>
  <meta charset="UTF-8">
  <title>Nav-Test</title>
  <!-- 先引入Popper，再引入Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
</head>
<body>
  <ger-nav></ger-nav>
</body>
</html>

3. 在Web Component中手动初始化Bootstrap组件 #

因为Bootstrap不会自动扫描Shadow DOM，所以我们需要在组件的connectedCallback里手动找到元素，创建对应的Bootstrap实例，同时记得在组件销毁时清理这些实例：

class Header extends HTMLElement {
  constructor() {
    super();
    this.shadowRoot = null;
    this.bootstrapComponents = []; // 存储组件实例，用于后续销毁
  }

  connectedCallback() {
    // 克隆模板内容，避免多次复用同一DOM节点
    this.shadowRoot = this.attachShadow({ mode: 'closed' });
    const templateContent = headerTemplate.content.cloneNode(true);
    this.shadowRoot.appendChild(templateContent);

    // 初始化所有下拉菜单
    const dropdownToggles = this.shadowRoot.querySelectorAll('[data-bs-toggle="dropdown"]');
    dropdownToggles.forEach(toggle => {
      const dropdown = new bootstrap.Dropdown(toggle);
      this.bootstrapComponents.push(dropdown);
    });

    // 初始化导航栏折叠组件
    const collapseToggle = this.shadowRoot.querySelector('.navbar-toggler');
    const collapseTarget = this.shadowRoot.getElementById('navbarNav');
    if (collapseToggle && collapseTarget) {
      const collapse = new bootstrap.Collapse(collapseTarget, { toggle: false });
      // 绑定折叠按钮的点击事件
      collapseToggle.addEventListener('click', () => collapse.toggle());
      this.bootstrapComponents.push(collapse);
    }

    // 初始化模态框
    const modalTrigger = this.shadowRoot.querySelector('[data-bs-target="#exampleModal"]');
    const modalElement = this.shadowRoot.getElementById('exampleModal');
    if (modalElement && modalTrigger) {
      const modal = new bootstrap.Modal(modalElement);
      // 阻止触发按钮的默认跳转，先打开模态框
      modalTrigger.addEventListener('click', (e) => {
        e.preventDefault();
        modal.show();
      });
      this.bootstrapComponents.push(modal);
    }
  }

  disconnectedCallback() {
    // 销毁所有Bootstrap组件，防止内存泄漏
    this.bootstrapComponents.forEach(component => component.dispose());
    this.bootstrapComponents = [];
  }
}

customElements.define('ger-nav', Header);

为什么这样有效？ #

• 全局引入的Bootstrap JS提供了可调用的API，我们可以手动创建组件实例。
• 直接在Shadow DOM内部查找元素并初始化，绕开了Bootstrap自动扫描的限制。
• 在disconnectedCallback中销毁组件是Web Component的最佳实践，避免内存泄漏。

内容的提问来源于stack exchange，提问作者user11210891