# Dynamically loading/unloading CSS based on route

**URL:** <https://discourse.aurelia.io/t/dynamically-loading-unloading-css-based-on-route/2938>\
**Category:** Help Requests\
**Created:** [September 18, 2019, 4:49pm UTC](https://discourse.aurelia.io/t/dynamically-loading-unloading-css-based-on-route/2938 "2019-09-18T16:49:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidlav](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidlav/32/895_2.png) [@davidlav](https://discourse.aurelia.io/u/davidlav)\
**Post date:** [September 18, 2019, 4:49pm UTC](https://discourse.aurelia.io/t/dynamically-loading-unloading-css-based-on-route/2938/1 "2019-09-18T16:49:03Z")

</div>

I’d like to use a CSS framework (Semantic-UI) for one of my routes/components, but if I leave it permanently it messes with the layout of other routes/pages I’ve already built without it.

Is there an “elegant” way to load in or “activate” a CSS file on route change and then remove it again upon another route change?

---

<div class="post-metadata">

**Author:** ![Alfhir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alfhir/32/1510_2.png) [@Alfhir](https://discourse.aurelia.io/u/Alfhir)\
**Post date:** [September 20, 2019, 7:34am UTC](https://discourse.aurelia.io/t/dynamically-loading-unloading-css-based-on-route/2938/2 "2019-09-20T07:34:43Z")

</div>

Hi!

If you want to avoid leaking styles from within that component to the outside, afaik you basically have two options:

1. 

`<require from="./styles.css" as="scoped"></require>`

1. Include styles inline with the component template and use shadow dom to encapsulate the component with @useShadowDOM():

```auto
<template>
   <style>
   </style>
   <content>
   </content>
</template>

```

Best

---

<div class="post-metadata">

**Author:** ![davidlav](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidlav/32/895_2.png) [@davidlav](https://discourse.aurelia.io/u/davidlav)\
**Post date:** [September 20, 2019, 3:13pm UTC](https://discourse.aurelia.io/t/dynamically-loading-unloading-css-based-on-route/2938/3 "2019-09-20T15:13:07Z")

</div>

Thanks, I’ll give that a shot.

---

<div class="post-metadata">

**Author:** ![davidlav](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidlav/32/895_2.png) [@davidlav](https://discourse.aurelia.io/u/davidlav)\
**Post date:** [November 6, 2019, 6:49pm UTC](https://discourse.aurelia.io/t/dynamically-loading-unloading-css-based-on-route/2938/4 "2019-11-06T18:49:37Z")

</div>

If anyone else finds this, I got it to work by including **both** the `as="scoped"` attribute on my css require **and** adding the `@useShadowDOM` decorator on my view model (so at least for me it wasn’t quite the either/or mentioned above). Works in both Firefox and Chrome.

Doing so allows me to import a CSS file (hand-written or from a library like Bootstrap, Materialize, or Fomantic) for _just that component_ and not have it stick around to pollute further components when I route to them afterwards.

---

<div class="post-metadata">

**Author:** ![Alfhir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alfhir/32/1510_2.png) [@Alfhir](https://discourse.aurelia.io/u/Alfhir)\
**Post date:** [November 7, 2019, 7:57pm UTC](https://discourse.aurelia.io/t/dynamically-loading-unloading-css-based-on-route/2938/5 "2019-11-07T19:57:47Z")

</div>

Did you inline the styles when trying to use @useShadowDOM only?

---

<div class="post-metadata">

**Author:** ![davidlav](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidlav/32/895_2.png) [@davidlav](https://discourse.aurelia.io/u/davidlav)\
**Post date:** [November 7, 2019, 8:13pm UTC](https://discourse.aurelia.io/t/dynamically-loading-unloading-css-based-on-route/2938/6 "2019-11-07T20:13:46Z")

</div>

I couldn’t because the CSS I wanted to have scoped were library files (Materialize and Fomantic). And my hand-written CSS is in Stylus, so I wouldn’t be able to inline it anyway (so far as I’m aware, using Webpack). But thanks for getting me 95% of the way there!

---

<div class="post-metadata">

**Author:** ![Alfhir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alfhir/32/1510_2.png) [@Alfhir](https://discourse.aurelia.io/u/Alfhir)\
**Post date:** [November 8, 2019, 11:27am UTC](https://discourse.aurelia.io/t/dynamically-loading-unloading-css-based-on-route/2938/7 "2019-11-08T11:27:19Z")

</div>

You’re welcome. Thank you for letting me know, that I was able to help. 😃