能否在Shadow Host（:host）上使用::before或::after伪元素？

你的写法存在两个关键问题，导致伪元素无法生效：

1. 选择器语法错误：:host(::before)是错误写法，正确格式应为:host::before——伪元素需要直接紧跟在:host选择器后方，无需用括号包裹。:host本身用于选中Shadow DOM的宿主元素，伪元素作为宿主的附属元素，直接通过::before/::after追加即可。

2. CSS属性语法错误：代码里content: "",使用了逗号分隔属性值，CSS属性间必须用分号分隔，这个语法错误会导致整个样式规则失效。

修正后的正确代码如下：

:host::before {
  content: ""; /* 此处改为分号 */
  position: absolute;
  inset: 0px;
  background-color: rgba(0,0,0,0.5);
}

额外注意：由于伪元素使用了position: absolute，需要给Shadow Host元素设置position: relative，否则伪元素会相对于最近的定位祖先元素（而非宿主）定位，可能无法达到预期的覆盖效果。可以在宿主元素的样式中补充：

:host {
  position: relative;
}

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