有没有可能在 shadow dom 中使用 twitter bootstrap 的 css 类？

Question

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

Answer 1

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

Answer 2

只需将 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>
        `
  }
} )

<c-e></c-e>

有没有可能在 shadow dom 中使用 twitter bootstrap 的 css 类？

Is there any possibility to use the css classes of twitter bootstrap in shadow dom?

html

javascript

web-component

shadow-dom

bootstrap-4