Aurelia require html import not working

Question

I have no errors in the console. But the console is not logging a console.log I put in the constructor of the top-nav.js . But more importantly. The simple jumbotron div is not rendering, Aurelia says in the console that it found the correct top-nav.html though. Here is the App.html

<template>
    <require from="bootstrap/css/bootstrap.css"></require>
    <require from="htmlreq/top-nav"></require>
    <h1>${message}</h1>
</template>

App.js for consistency

export class App {
    message = "Hello Pathways";
}

top-nav.html

<template>
    <div class="jumbotron">
        <div class="container"> 
            <p>Career &amp; Technical Education </p>
        </div>
    </div>
</template>

top-nav.js the console statement is not firing. And the Jumbotron is not visible or listed anywhere in the dom.

export class TopNav {
    _topnav = true;
    constructor() {
        console.log('constructed');
    }
}

Answer 1

You are "requiring" the custom element but you are not "using" it.

You should do this:

<template>
    <require from="bootstrap/css/bootstrap.css"></require>
    <require from="htmlreq/top-nav"></require>
    <h1>${message}</h1>

    <top-nav></top-nav>
</template>

No need to use compose in this case.

Answer 2

Okay, it looks like this is a case for <compose> . It "composes" the html, and you can still do some view-model view binding business if you wanted to. I need this on the App.html instead of the require. Require, I think, is more for creating custom attributes/tags, and then including them in the app.html

<template>
    <require from="bootstrap/css/bootstrap.css"></require>
    <compose view-model="htmlreq/top-nav" view.bind="htmlreq/top-nav.html"></compose>
    <h1>${message}</h1>
</template>