Стилизовать элемент хоста в компоненте Stencil на основе класса - PullRequest
Новая
       68

Стилизовать элемент хоста в компоненте Stencil на основе класса

0 голосов
/ 24 января 2020

В 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. Теперь, чтобы применить стилизацию на основе этого класса, я добавил следующий 

:host {
    color: red;

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

Я вижу is-test класс для элемента my-component, но стиль background-color: green не применяется. Должно быть, я что-то делаю не так, любая помощь будет признательна!

1 Ответ

5 голосов
/ 24 января 2020

Вы можете использовать :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>;
}
...