CODEWITHSUNDEEP
javascripthtmlbootstrap-4web-componentshadow-dom
Andreas
Andreas

Reputation: 473

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

Is there any possibility to use twitter bootstrap inside shadow dom? At this point, a major advantage turns out to be a disadvantage.

Upvotes: 0

Views: 177

Answers (2)

Supersharp
Supersharp

Reputation: 31181

Just insert the Bootstrap CSS file inside the Shadow DOM with a <link href="stylesheet"> element:

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

Upvotes: 2

JensW
JensW

Reputation: 442

You can use the ::shadow selector to style elements in the shadow DOM, I believe.

Upvotes: -1

Related Questions