Stencil框架Scoped样式下，如何修改插槽中子组件的样式？

你的需求是可行的，但由于StencilJS的Scoped样式隔离机制，直接通过::slotted无法穿透到子组件内部元素。以下是几种可行的解决方案：

方案1：使用CSS变量（推荐） #

这是最符合组件设计原则的方式，通过子组件暴露的CSS变量来控制样式：

1. 修改gov-icon.scss，将固定样式替换为变量：

span {
    font-size: var(--gov-icon-font-size, 1rem);
}

2. 在gov-button.scss中，给插槽内的gov-icon设置变量值：

button.element ::slotted(gov-icon) {
    --gov-icon-font-size: 3rem;
}

方案2：使用:host-context选择器 #

让子组件感知自己所在的父组件上下文，从而应用对应样式：

修改gov-icon.scss：

span {
    font-size: 1rem;
}

// 当gov-icon位于gov-button内部时生效
:host-context(gov-button) span {
    font-size: 3rem;
}

如果需要更精准匹配（比如特定类的gov-button），可以写：

:host-context(gov-button.small) span {
    font-size: 2rem;
}

方案3：使用::deep穿透选择器 #

这个方式会打破Scoped样式的隔离，适合不需要严格样式隔离的场景：

修改gov-button.scss：

button.element ::deep(gov-icon span) {
    font-size: 3rem;
}

原理说明 #

Stencil的Scoped样式会给组件的DOM元素添加一个唯一的属性（如data-st-xxxx），所有组件内的样式选择器都会自动带上这个属性，从而实现样式隔离。这意味着父组件的样式无法直接选中子组件内部的元素——子组件内部的元素带有自己的Scoped属性，父组件的选择器无法匹配到。

上述方案中，CSS变量和:host-context都是遵循组件封装原则的做法，而::deep属于“破防”手段，需谨慎使用。

内容的提问来源于stack exchange，提问作者iwory