使用Angular Shadow DOM CSS选择器的注意事项

Question

我是Angular的新手，只是有关应用Shadow DOM CSS Selector的问题。下面是一些伪代码：

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

其中paProductForm是我的自定义组件的选择器，其形式为：

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

我被告知/deep被父组件用来定义样式这会影响子组件模板中的元素，因此，在我的情况下，该样式应仅应用于productForm.component.html中的<div>，并且也应用于子组件（如果有）。但是它实际上在html客户端的头部设置了一个全局样式元素，如下所示：这意味着样式也将应用于ID为“ first”和“ second”的“ div”元素，这不是我想要的，也不是/deep的目标，因为它声称是？

Answer 1

根据Angular Documentation：

将:: ng-deep伪类应用于任何CSS规则将完全禁用该规则的视图封装。

应用了:: ng-deep的任何样式都将成为全局样式。为了将指定的样式作用于当前组件及其所有后代，请确保在:: ng-deep之前包括：host选择器。如果使用:: ng-deep组合器而不使用：host伪类选择器，则该样式可能会渗入其他组件。

/deep和::ng-deep

相同

，但SASS支持::ng-deep（两者均已标记为已弃用，应避免使用）]