• 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

A workaround for Shadow Dom shared global styles in Aurelia 2

Aurelia 2 · December 22, 2020

One of my favourite additions to Aurelia 2 is proper support for Shadow DOM and with it, the ability to encapsulate my styles on a per-component basis, it works well most of the time. However, if you’re using a CSS library such as Bootstrap or legacy CSS, you will need to add in some global CSS styling.

Fortunately, Aurelia makes it easy to add in shared CSS styles. In-fact, if you use npx makes aurelia to create a new Aurelia 2 application and choose Shadow DOM, it automatically adds some code into main.ts which allows you to add shared CSS styles.

For those of you using Bootstrap or some generic CSS reset such as Normalize, you’re going to encounter a problem where CSS styles targeting classes will work, but anything that targets generic HTML tags like body will not be “shared” across your app, they will be ignored.

I encountered this issue while attempting to use Bootstrap 5 in an Aurelia 2 application. The solution I came up with might not be the best solution, but it’s an acceptable one.

Inside of your index.ejs file you want to add the Bootstrap 5 CSS file from the CDN they provide:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

Secondly, you want to make sure that Bootstrap 5 is installed (or relevant CSS library) and import the CSS from within your main.ts file.

import shared from './shared-styles.css';
import bootstrapStyles from 'bootstrap/dist/css/bootstrap.css';

Aurelia.register(
  StyleConfiguration.shadowDOM({
    sharedStyles: [bootstrapStyles, shared],
  })
)
  .app(MyApp)
  .start();

Because of the limitations of Shadow Dom and shared styles, I had to include it in my index.ejs file for the styling for HTML elements and then shared for the classes. It might seem a bit redundant, but it worked for my needs. I am sure there must be a way to handle all of this with Webpack, right now, I am just too lazy to find out.

I wrote this article because I know others are going to encounter the same issues and it just saves time and hassle.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz