I've identified my problem, I just can't seem to work out a way around it. I got a theme from {wrap}bootstrap because I am nobody's graphic designer and started piecing it together in Aurelia, based on the Navigation skeletons.
My issue is the navbar. Using the skeleton, routes are configured in app.js - fine, no problem - and then one uses
<require from="nav-bar.html"></require>
to yank the navbar into one's page. This is deforming the CSS because, as F12 informs me, a new element is added as the nav-bar component's container in the emitted HTML. In this case, it's
<nav-bar class="au-target" router.bind="router" au-target-id="1">
<!-- usual bootstrap navbar stuff -->
</nav-bar>
How can I work around this?
Using Aurelia's @containerless Decorator:
To accomplish this you'll want to use Aurelia's @containerless decorator. As far as I know you need to have a full component, not just an HTML view. If you don't already also have a nav-bar.js, it's no big deal to create one.
Example nav-bar.js:
import {containerless} from 'aurelia-framework';
@containerless
export class NavBar {
}
Usage:
First, require your view nav-bar in the parent view, like this. Be sure not to specify the .html since you want it to look for the viewmodel also:
<require from="nav-bar"></require>
Then, further down in your view in the correct location, use the element tag to include it.
<nav-bar></nav-bar>
Alternate approach using Compose Element:
I've never used this, but it might also be a good approach. According to this blog article by Dwayne Charrington, you could also use the built-in Aurelia element <compose> to import a containerless view and/or a view without the viewmodel. It doesn't explicitly say you can do both so I'm making an assumption that it would work. Give it a shot and let me know if I need to update this answer post.
<compose view="nav-bar.html" containerless></compose>