Javascript 使用角度阴影DOM CSS选择器的怪癖

我不熟悉Angular，只是一个关于应用ShadowDOM CSS选择器的问题。下面是一些伪代码：

//root template.html
<div id="first">
   <div id="second">
       <paProductForm ..."></paProductForm>
   <div>
</div>

我被告知父组件使用

/deep

定义样式 这会影响子组件模板中的元素，因此在我的例子中，这意味着样式应该只应用于productForm.component.html中的

，如果有子组件，也应该应用于子组件。 但它实际上在html客户端的头部设置了一个全局样式元素，如下所示 这意味着样式也将应用于id为“first”和“second”的“div”元素，这不是我想要的，也不是它声称的

/deep

的目标

将：：ng deep伪类应用于任何CSS规则都会完全禁用该规则的视图封装应用了：：ng deep的任何样式都将成为全局样式。为了将指定样式的范围限定到当前组件及其所有子体，请确保在：：ng deep之前包含：host选择器。如果使用：：ng deep combinator时不使用：host伪类选择器，则该样式可能会渗透到其他组件中

---

/deep

和

：ng deep

是相同的，除了

：：ng deep

由SASS支持（两者都被标记为不推荐，应该避免）

来自亚当·弗里曼的书《Pro Angular 9》：

使用shadowdom意味着常规CSS选择器无法跨越一些边界。为了帮助解决这个问题，有许多特殊的CSS选择器在使用依赖于阴影DOM的样式时非常有用（即使是在模拟阴影DOM时），如下所述：

：主机 此选择器用于匹配零部件的主体图元

：主机上下文（类选择器） 此选择器用于匹配作为特定类成员的宿主元素的祖先

/deep/或>>>

---

父组件使用此选择器定义影响子组件模板中元素的样式。仅当@组件装饰器的封装属性设置为模拟时，才应使用此选择器。

/deep/、>>>和：：ng deep-已弃用

@Component({
    selector: "paProductForm",
    templateUrl: "productForm.component.html",
    styles: ["/deep/ div { border: 2px black solid; font-style:italic }"]
})
export class ProductFormComponent {
   ...
}