如何在JS中创建带有引导下拉菜单的shadowDOM

Question

我正在创建一个 chrome 扩展，我需要将 bootstrap 提供的分割按钮添加为 ShadowDOM。但我找不到任何明确的文档。有人可以告诉我如何创建一个 ShadowDOM 来注入 bootstrap css、js 和 popper js 文件吗？

我已经尝试过如下，但按钮不可见。

const shadowHost = document.getElementById('my-shadow-host');
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });

  // Bootstrap button and dropdown menu HTML
const bootstrapButtonAndDropdown = `
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Bootstrap Button</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
`;

  // Append Bootstrap components to the shadow root
  shadowRoot.innerHTML = bootstrapButtonAndDropdown;

  // Add an event listener to the button inside the Shadow DOM
  const buttonInsideShadowDom = shadowRoot.querySelector('.btn-primary');
  buttonInsideShadowDom.addEventListener('click', () => {
    alert('Button inside Shadow DOM clicked!');
  });

class SplitButton extends HTMLElement {
  constructor() {
    super();
    this.render();
  }

  render() {
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML += template;
  }
}

window.customElements.define("split-button", SplitButton);

调用分割按钮

const button = document.createElement('split-button');

但是按钮返回 null。

Answer 1

我重构了你的代码；应该是不言自明的 请注意，您不会添加多个监听器，因此不需要

addEventListener

<split-button></split-button>
<script>
  customElements.define("split-button", class extends HTMLElement {
    constructor() {
      super().attachShadow({
        mode: "open"
      }).innerHTML = `<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Bootstrap Button</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>`;
      this.shadowRoot.querySelector('.btn-primary').onclick = () => alert('Button inside Shadow DOM clicked!');
    }
  });

</script>