Aurelia 2 with shadowDom and Bootstrap CSS / JS failed

Help Requests
1

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

Aurelia
  .register(StyleConfiguration.shadowDOM({
    // optionally add the shared styles for all components
    sharedStyles: [bootstrapStyle]
  }))
  // Register all exports of the plugin
  .register(Plugin)
  .app(App)
  .start();

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
cheers

1 Like
2

Do you need the bootstrap JS? I thought it was mainly the CSS that is needed.

You probably may also need a typescript bootstrap.

3

Thanks for your response. :slight_smile:

As I have already described above I also tried to import 'bootstrap' into the main.ts file. This also works if I don’t use (activate) ShadowDom in the project setup process (npx makes aurelia).
However, if I want to use ShadowDom for CSS encapsulation the bootstrap library imported into the main.ts file does not seem to be loaded into the components at runtime.

Is this not possible with Aurelia 2 at all or just a bug? I am just wondering because with Angular I used this (Bootstrap JS library in a ShadowDom encapsulated component) in several projects.

And yes, I need the JS library provided by Bootstrap for several Bootstrap components like Nav-Taps and Tooltips.

I mean this behavior might be not Bootstrap JS library typically. Also other third party JS library will not be imported into compontents with ShadowDom encapsulation.

Does anybody have got it to work to import a JS library into a compontent if ShadowDom is used?

Thanks

4

Shadow DOM does not allow styles from outside your component to get inside of it.
As well as bootstrap scripts can’t see into your custom elements and attach event handlers to them.