Style top element of component

Help Requests
1

I am using Aurelia 2.0.0-beta.8, and I have some styles I apply to the top level element in a component:
my-component.html:

<div style="color: red;">
whatever stuff here
</div>

Then I import that component in another one
parent.html:

<import from="wherever/path/my-component" />
<div>
whatever was in parent component...
<my-component></my-component>
</div>

I need the style (color: red for this example) to be applied to the top element imported into parent.html, but there is a custom html element that is inserted instead and I don’t know how to style those. The generated html looks like:

<div>
whatever was in parent component...
<my-component style="this is where I need to apply styles">
    <div style="color: red;">
        whatever stuff here
    </div>
</my-component>
</div>
2

If you’re using shadow dom, the :host pseudo selector might help: :host - CSS: Cascading Style Sheets | MDN

Failing that, you could make your component containerless

3

Thanks @davidsk ! Containerless worked for me