Understanding ShadowDomCSS

Help Requests
1

Need some help with shadowDom CSS.

When I follow the directions and add sharedStyles to my component…

main.ts

import maincss from 'my-app.css';
import menucss from 'menu.css';

Aurelia
  .register(Plugin,
    RouterConfiguration.customize({ useUrlFragmentHash: false }), 
    LoadingIndicator,
    ValidationHtmlConfiguration,
    StyleConfiguration.shadowDOM({
      // optionally add the shared styles for all components
      sharedStyles: [maincss, menucss]
    }))
  .app(MyApp)
  .start();

npm start…

Added @useShadowDom() to all my main components doesn’t work either.

Added
<import from="./my-app.css"></import>

Lines all over the place doesn’t work either. It seems that only some of the styles applied on 2nd review.

I had it working at some point, but then I updated my aurelia-cli and aurelia to latest version – and then the main styles disappeared again…

I was able to get some of it working but some fonts are not showing up and some backgrounds aren’t as well, because I guess “body” is an upperlevel node in html and so it has more difficulties for shadowDom usage. Some of the styles are showing up. And sometimes it looks like I might be using both ShadowDom AND the global styles (and yet even if I remove the individual shadowDom decorators and remove the imports, I get a bit of the same result).

I wonder if there’s a way to turn on a debug mode in aurelia to tell me which ones are loaded, I’m able to deduce by just removing things one by one from Aurelia – or renaming CSS files in the aurelia code – and seeing if there’s errors.

Just something to think about. I think I am close to solving it but it’s hard to even articulate what exactly is wrong too without putting a sample app up when it comes to CSS issues. I’m considering maybe avoiding the use of shadowDom as it can get complicated.

Anyone got any good blogs or guide links for ShadowDom sample projects ? If it is less of an aurelia topic I can instead post to a shadowdom stackoverflow or something.

Just there’s not a lot of documentation on the CSS management of a sample project with fonts, font-awesome, and everything. Maybe I just need to experiment with it some more.

2

Hi there.

I have a great example project using Aurelia 2 and Shadow DOM here: huntr/frontend at main · Vheissu/huntr · GitHub — it’s a work in progress but shows how I use it with Bootstrap.

Sadly, when it comes to Shadow DOM and global styles targeting generic selectors like body it’s not an Aurelia issue but rather a spec one. For global styles, I add those inline to my index.html file as you can see here: huntr/index.html at main · Vheissu/huntr · GitHub — Aurelia is just following the spec and doesn’t let you implement exceptions to hoist global generic elements.

The inline approach is how I tackle this kind of scenario. Fortunately, for global CSS, you only use that to set things like the body element, and then the rest of your styling is component-specific (where Shadow DOM comes in).

1 Like
3

Thank you. I eventually did discover that as well, so after a few hours of experiment, I started using classes/ids a lot more down below in my DOM structure and it seems to work much better.

I also removed all my custom fonts, and placed them into the index.html as a Google static CDN load which works much better than attempting to have them in my “my-app.css”…

Also found out you can serve static images with Webpack 5, it’s really cool. I needed that for dev-server as I would instead use Cloud provider for static URL service. Now just need to add some SCSS/less or something.

I think both useShadowDom and Global Shared Styles seem to work, after I changed those things it all started working well together and couldn’t figure it out. Theo lny remaining problem I have is that my Route implementation is not auto-loading path: [‘’, ‘home’] … if you use home it works, but localhost:9000/ seems to have problems loading the ‘’ route path.

Yes when in doubt, use <style> tags and experiment. I also decided to torture myself a bit with CSS animations.

Love your code sample thanks, I didn’t know about izitoast cool.