# Aurelia 2 with shadowDom and Bootstrap CSS / JS failed

**URL:** <https://discourse.aurelia.io/t/aurelia-2-with-shadowdom-and-bootstrap-css-js-failed/4765>\
**Category:** Help Requests\
**Created:** [May 11, 2022, 1:15pm UTC](https://discourse.aurelia.io/t/aurelia-2-with-shadowdom-and-bootstrap-css-js-failed/4765 "2022-05-11T13:15:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TIdeveloper](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tideveloper/32/2291_2.png) [@TIdeveloper](https://discourse.aurelia.io/u/TIdeveloper)\
**Post date:** [May 11, 2022, 1:15pm UTC](https://discourse.aurelia.io/t/aurelia-2-with-shadowdom-and-bootstrap-css-js-failed/4765/1 "2022-05-11T13:15:59Z")

</div>

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.

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

---

<div class="post-metadata">

**Author:** ![ArchEnemy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/archenemy/32/2445_2.png) [@ArchEnemy](https://discourse.aurelia.io/u/ArchEnemy)\
**Post date:** [June 1, 2022, 5:35am UTC](https://discourse.aurelia.io/t/aurelia-2-with-shadowdom-and-bootstrap-css-js-failed/4765/2 "2022-06-01T05:35:40Z")

</div>

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

You probably may also need a typescript bootstrap.

> <https://stackoverflow.com/questions/66451779/problem-with-opening-bootstrap-5-modal-via-typescript/66828367#66828367>

---

<div class="post-metadata">

**Author:** ![TIdeveloper](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tideveloper/32/2291_2.png) [@TIdeveloper](https://discourse.aurelia.io/u/TIdeveloper)\
**Post date:** [June 1, 2022, 10:05am UTC](https://discourse.aurelia.io/t/aurelia-2-with-shadowdom-and-bootstrap-css-js-failed/4765/3 "2022-06-01T10:05:18Z")

</div>

Thanks for your response. 🙂

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

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [June 1, 2022, 5:12pm UTC](https://discourse.aurelia.io/t/aurelia-2-with-shadowdom-and-bootstrap-css-js-failed/4765/4 "2022-06-01T17:12:33Z")

</div>

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.

> **[ShadowRoot.mode - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode)**
>
> The mode read-only property of the ShadowRoot
> specifies its mode — either open or closed. This defines
> whether or not the shadow root's internal features are accessible from JavaScript.

> **[Open vs. Closed Shadow DOM](https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af)**
>
> Out of the four specifications created for Web Components, the Shadow DOM is one of the most powerful. The Shadow DOM allows the component…