How to reflect BEM blocks in Aurelia views

I'm about to start a new project using Aurelia and I'm considering to use it in conjunction with CSS BEM methodology.

First question: Is this basically considered a good match or are there any alternatives which "fit" better with Aurelia?

Main question:

Best explained with an example for some custom Aurelia view (an app header):

<template>
    <div class="AppHeader">
        <span class="AppHeader-logo"></span>
        <span class="AppHeader-text"></span>
        <app-menu></app-menu>
    </div>
</template>

When embedded into another view, this leads to a resulting DOM like this (simplified):

<app-header>
    <div class="AppHeader">
        <span class="AppHeader-logo"></span>
        <span class="AppHeader-text"></span>
        <app-menu>
                    <!-- ... -->
        </app-menu>
    </div>
</app-header>

Obviously, the wrapper div with the AppHeader class is kind of superfluous since there's also the app-header tag. Unfortunately it doesn't seem to be possible to assign the CSS class AppHeader (which is needed for BEM) to the base element of the view (the template tag in the view file).

Are there any alternative ways that I'm not aware of or is it considered "good" practice (or at least acceptable) to have many wrapper elements inside views which somehow bloat the DOM?

Solution

I just realized, that putting custom classes on the custom elements themselves (the template) actually works, so I can simply write something like this:

<template class="AppHeader">
    <span class="AppHeader-logo"></span>
    <span class="AppHeader-text"></span>
    <app-menu></app-menu>
</template>

Edit / Additional info

This won't work if the view is a "base view" of a route since the template element won't be rendered at all in this scenario but is replaced by the router-view element.