是否有可能在 shadow dom 中使用 twitter bootstrap 的 css 类？答案

【问题标题】：Is there any possibility to use the css classes of twitter bootstrap in shadow dom?是否有可能在 shadow dom 中使用 twitter bootstrap 的 css 类？
【发布时间】：2019-04-29 08:04:42
【问题描述】：

是否有可能在 shadow dom 中使用 twitter bootstrap？在这一点上，主要优势变成了劣势。

【问题讨论】：

标签： javascript html bootstrap-4 web-component shadow-dom

【解决方案1】：

只需将 Bootstrap CSS 文件插入到带有 <link href="stylesheet"> 元素的 Shadow DOM 中：

<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">

customElements.define( 'c-e', class extends HTMLElement {
  constructor() {
    super()
    this.attachShadow( { mode: 'open' } )
        .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">
          <button class="btn btn-primary">Hello</button>
        `
  }
} )

&lt;c-e&gt;&lt;/c-e&gt;

【讨论】：

你还知道如何让引导程序的 javascript 部分正常工作吗？
@Andi 这是一个更大的问题。我不是 Bootstrap 专家，因此您应该提供一个示例，因为答案可能取决于用例。
对不起，我弄错了；你给出的答案是绝对正确和普遍的。
@Andi 不，我不认为需要 JS 的控件在 Shadow DOM 中不起作用。一种解决方法是将控件放在 Light DOM 中，然后通过槽插入到 Shadow DOM 中。

【解决方案2】：

我相信，您可以使用::shadow 选择器来设置 shadow DOM 中的元素样式。

【讨论】：

我不想应用自己的，但是引导样式。