• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How to Use Bootstrap JavaScript Components Inside of Shadow DOM Web Components

Javascript · August 24, 2022

Despite doing this front-end thing for over a decade, I still encounter new problems thanks to the ever-evolving web specifications. One of the newer specifications is Web Components.

Now, my situation was I wanted to see Bootstrap 5 Javascript components. Because of the closed-wall nature of Shadow DOM means, the global approach Bootstrap takes by default will not work for components.

Fortunately, it is possible to use Bootstrap components with Shadow DOM, albeit programmatically.

import { Dropdown } from 'bootstrap'; 

const dropdownElement = this.element.shadowRoot.querySelector(".dropdown-toggle-product");
    
const dropdown = new Dropdown(dropdownElement);

In my example, I am using Aurelia 2, but the premise is the same. You access the shadowRoot of the element that contains the markup, you want to enable Bootstrap on. It’s a new paradigm, shadowRoot becomes the document

You probably want to ensure your components are in open mode, as I haven’t tested if this approach would even work in closed mode (presumably not).

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • Thoughts on the Flipper Zero
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Reliably waiting for network responses in Playwright
  • Wild Natural Deodorant Review

Recent Comments

  • Dwayne on Is Asking Developers How to Write FizzBuzz Outdated?
  • kevmeister68 on Is Asking Developers How to Write FizzBuzz Outdated?
  • Kevmeister68 on Start-Ups and Companies That Embrace Work From Anywhere Will Be More Likely to Survive the Coming Recession in 2023
  • kevmeister68 on What Would Get People Back Into the Office?
  • Dwayne on PHP Will Not Die

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz