Twitter Bootstrap Question posted in

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.

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search