引导下拉菜单不适用于影子根

Question

I was trying to create a navbar component in a.js file so I can use it on multiple pages(not allowed to use react or other libraries for this project).我试图在 a.js 文件中创建一个导航栏组件，这样我就可以在多个页面上使用它（不允许在这个项目中使用 react 或其他库）。 I copied the navbar from bootstrap and pasted it in my navBar.js.我从引导程序复制了导航栏并将其粘贴到我的 navBar.js 中。 The CSS style worked fine but when I clicked the button the dropdown menu didn't show up. CSS 样式工作正常，但是当我单击按钮时，下拉菜单没有显示。

Could anyone tell me what's the problem and how can I solve it?谁能告诉我有什么问题，我该如何解决？

another question, I saw some online comments say don't use web components.另一个问题，我看到一些网上评论说不要使用web 组件。 Should I keep on using it or just pasted the navbar into my index.html(in where the dropdown button works fine)我应该继续使用它还是只是将导航栏粘贴到我的 index.html 中（下拉按钮可以正常工作的地方）

Here is my navBar.js:这是我的 navBar.js：



const navTemplate = document.createElement('template');
navTemplate.innerHTML = 
    `
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</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 active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
              </li>
            </ul>
            <form class="d-flex">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
    `;
class NavBar extends HTMLElement{
    constructor(){
        super();
        this.attachShadow({mode:'open'});
        this.shadowRoot.appendChild(navTemplate.content);
        
    }
    connectedCallback(){
    }
     
}

window.customElements.define('nav-bar', NavBar);

And this is my index.html:这是我的索引。html：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


    
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    
    
    <nav-bar></nav-bar>
    
    <script src='../components/navBar.js'></script>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Answer 1

The problem seems to be that the dropdowns aren't initialized correctly.问题似乎是下拉菜单未正确初始化。 You could do that yourself with new bootstrap.Dropdown(dropdownToggleEl) in connectedCallback , but that leaves you with work for opening, closing and triggering events on clicks and such.您可以使用connectedCallback中的new bootstrap.Dropdown(dropdownToggleEl)自己完成此操作，但这样您就可以在点击等时打开、关闭和触发事件。 The "culprit" is Shadow DOM. “罪魁祸首”是 Shadow DOM。

This is one of those cases where we would suggest to not use Shadow DOM .这是我们建议不要使用 Shadow DOM的情况之一。 You are just wraping the layout into a component and even importing the CSS.您只是将布局包装到组件中，甚至导入 CSS。 Unless there is a reason to use Shadow DOM (like custom CSS encapsulation), skip it.除非有理由使用 Shadow DOM（如自定义 CSS 封装），否则请跳过它。 It's fine to have components without Shadow DOM alongside others that do.将没有 Shadow DOM 的组件与其他有的组件放在一起是很好的。

Or you could alternatively use slots .或者您也可以使用 slot 。 Replace the li tags in your components template替换组件模板中的li标签

...
<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <slot></slot>
    </ul>
    ...
</div>
...

and declare them with the markup of your component in the index.html:并在 index.html 中使用组件的标记声明它们：

<nav-bar>
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</nav-bar>

引导下拉菜单不适用于影子根

问题描述

1 个解决方案

解决方案1
0 2021-04-22 09:14:58

引导下拉菜单不适用于影子根

问题描述

1 个解决方案

解决方案1 0 2021-04-22 09:14:58

解决方案1
0 2021-04-22 09:14:58