You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Shadow Root外部通过CSS选择器选中其子元素?

如何从阴影根外部选中并样式化其中的img元素?

我需要选中下面<curie-image>组件阴影根内的<img>元素,为它设置object-fit属性:

<curie-image id="DynamicImage1">
    #shadow-root
        <img alt="No Image" style="width:100%;height:100%" src="data:image;base64, ...">
</curie-image>

目前面临这些限制:

  • 无法访问底层JavaScript,没法给阴影根内的子元素添加part属性,因此通过::part选择器样式化阴影DOM子元素的方案不可用
  • :host()选择器也无法使用,因为它必须在阴影树的上下文环境中才能生效

请问在这些限制下,有没有能从阴影根外部选中其子元素的CSS选择器?

另外还有一个奇怪的现象:全局CSS中编写的简单img选择器理论上应该匹配所有<img>元素(包括阴影根内的),但实际并没有为目标<img>设置object-fit属性,相关代码和样式检查结果如下:

...
img { 
  object-fit: none;
}

元素样式检查结果


内容的提问来源于stack exchange,提问作者Adrian

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.17 09:20:30