В 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
не применяется. Должно быть, я что-то делаю не так, любая помощь будет признательна!