Problem with Au2 CSS shared styles

Help Requests
1

Hey guys,
so I am having trouble with the setup for Au2, I used mostly defaults, ShadowDOM, Typescript.

It created a folder “dev-app” and a “src” folder, which seems to be troublesome when pathing together.

  • I made a component under /src/components.
  • Then /src/assets for images/fonts.
  • I made a main-page.html + css.
  • I made a menu.css for navigation.
  • Then I import "import maincss from '../src/main-page.css';" inside main.ts [under dev-app]. (this is because main-page.css wasn’t loading automatically as expected)
.register(StyleConfiguration.shadowDOM({
    // optionally add the shared styles for all components
    sharedStyles: [maincss, menucss]
  }))
  // R

So I have these… Except the CSS doesn’t show up. It seems to work fine in Au1, but doing something similar in Au2 it’s as if the stylesheets are not loading or being imported. None of the class css elements have their styles.

Am I misunderstanding something when someone says “shared styles”?

I see there is some sort of warning that isn’t very clear:

// Css files imported in this main file are NOT processed by style-loader
// They are for sharedStyles in shadowDOM.

Does that mean I have to use in main-page.html:

<import from="./nprogress.css"></import>

Obviously, there may be some sort of shadowDOM scoped CSS naming going on but this will definitely confuse a lot of developers due to its non-intuitive coding style. Docs need an example of global CSS vs an example of component-isolated CSS so that new developers can see the difference or “the proper way”.

I’m hoping docs.aurelia.io will eventually have a better hello-world example with a component CSS, how to lay out your folder structure [components, assets, automatic configs, customized configs] and/or a page dedicated to CSS imports perhaps?

2

Seems webpack does ShadowDom: Open and creates shadowDOM roots in the CSS… And you can close it yourself but that won’t work. “@ShadowDOM(false)” also doesn’t work.

The way things start to appear, is if you add a css file for every component. Disabling it using “closed” doesn’t seem to do the trick.

Then you need to <import from="./components/this-component.css"></import>

otherwise it won’t work.

Also it requires you to for example “.custom-component { }” or “:host { }”, but not “:host(.custom-component) { }” (which doesn’t work).

The existence of sharedStyles still seems to not get imported when it’s an open ShadowDOM custom element.

Imagine you put “sharedStyles” but Bootstrap doesn’t appear in your custom elements… But the way it is written it’s as if Bootstrap should just automatically be included in every custom element unless specifically opted out.