基於類在 Stencil 組件上設置宿主元素樣式

Question

在 Stencil 中設置shadow: true后，宿主元素的樣式如下

:host {
    color: red;
}

這行得通。 但現在我有以下組件

@Component({
    tag: 'my-component',
    styleUrl: 'my-component.scss',
    shadow: true
})
export class MyComponent {
    @Element() host: HTMLElement;

    render() {
        this.host.classList.add('is-test');
        return <div>Test</div>;
    }
}

我在其中將is-test類添加到宿主元素。 現在，要根據該類應用樣式，我添加了以下內容

:host {
    color: red;

    &.is-test {
        background-color: green;
    }
}

我在my-component元素上看到is-test類，但未應用background-color: green樣式。 我一定是在這里做錯了什么，任何幫助將不勝感激！

Answer 1

您可以使用:host() ：

:host {
    color: red;
}

:host(.is-test) {
    background-color: green;
}

順便說一句：如果你想在宿主元素上設置類（或任何屬性），你可以使用<Host>功能組件：

import { Host } from '@stencil/core';

// ...

render() {
    return <Host class="is-test"><div>Test</div></Host>;
}