Aurelia 2 with shadowDom and Bootstrap CSS / JS failed

Hi everbody,

I am new to Aurelia and doing some tests with Aurelia 2 to use it for a new project.
I created a new Aurelia 2 project with npx makes aurelia and selected the shadowDom and TypeScript options. Further I installed Bootstrap 5 as default CSS library for the components created in this project.
In the main.ts file I imported the Bootstrap style file in order to use it as shared style for all components.

import Aurelia, { StyleConfiguration } from 'aurelia';
import { App } from './app';
// Css files imported in this main file are NOT processed by style-loader
// They are for sharedStyles in shadowDOM.
// However, css files imported in other js/ts files are processed by style-loader.
//import shared from './shared.css';
import * as Plugin from "../src/index";
import bootstrapStyle from 'bootstrap/dist/css/bootstrap.min.css';

    // optionally add the shared styles for all components
    sharedStyles: [bootstrapStyle]
  // Register all exports of the plugin

As I found out the sharedStyle option does not work out of the box as I expected. I have to import the Bootstrap CSS file into all components manuelly on the top of the templates.
<import from="bootstrap/dist/css/bootstrap.min.css"></import>

With this approach I have got working the Bootstrap CSS classes in all components.

However, and this is my major point and problem, the Bootstrap own JS functions do not work in the components. I try to import Bootstrap with: import 'bootstrap'; to the main.ts as well as to the component specific: component-name.ts files without success.
It seems that the shadowDom option blocks the import of third party JS functions.

If I create an Aurelia 2 project without the shadowDom option the imported Bootstrap JS (into main.ts) works pretty well.

Does anybody has any idea how to get third party JavaScript imports (like those of Bootstrap) run on Aurelia 2 with shadowDom enabled?

Thanks for any hint

1 Like