我不确定这是否可行,但我不知道如何在一个组件内部影响另一个组件的作用域样式。
我们有以下组件:
@Component({
tag: "gov-button",
styleUrl: "gov-button.scss",
shadow: false,
scoped: true
})
export class GovButton {
render() {
return (
<button class="element">
<slot name="left-icon"></slot>
<slot />
<slot name="right-icon"> </slot>
</button>
)
}
}
button.element {
slot::slotted(gov-icon) {
font-size: 3rem;
}
}
@Component({
tag: "gov-icon",
styleUrl: "gov-icon.scss",
shadow: false,
scoped: true
})
export class GovIcon {
render() {
return (
<span aria-hidden="true" class={this.name}></span>
)
}
}
span {
font-size: 1rem;
}
你的小弟弟
<gov-button variant="primary" size="small">
<gov-icon slot="left-icon" name="lightbulb"></gov-icon>
Small Primary
<gov-icon slot="right-icon" name="question"></gov-icon>
</gov-button>
我想影响gov-button.scss
样式表中gov-icon
组件的外观,该样式表通过插槽插入gov-button
组件。
不幸的是,没有选择器,我不能影响它的外观,我甚至不确定这是否可能。
谢谢你帮忙
1条答案
按热度按时间zdwk9cvp1#
我认为这是因为技术上在Light DOM中没有插槽,而Stencil只有在scoped打开时才“模拟”它们。Stencil中的Scoped CSS意味着基于组件名称(在您的例子中是sc-gov-button和sc-gov-icon)向您的标记添加CSS类,并相应地修改CSS选择器,以便它们被“scoped”到这些类中。这就是为什么这不起作用的原因:
作为一种解决方法,您可以改用按钮CSS中的限定范围图标选择器:
当然,它也有缺点,比如在更改组件名称时需要更新它们。
看看他们是如何在Ionic中使用scoped的--他们只在出于性能原因不想使用Shadow DOM的少数组件中使用scoped。