使用 Angular Shadow DOM CSS 选择器的怪癖答案

【问题标题】：quirks of using Angular Shadow DOM CSS Selector使用 Angular Shadow DOM CSS 选择器的怪癖
【发布时间】：2019-11-06 01:20:03
【问题描述】：

我是 Angular 的新手，只是一个关于应用 Shadow DOM CSS 选择器的问题。下面是一些伪代码：

//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 声称的目标？

【问题讨论】：

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

标签： javascript angular

【解决方案1】：

根据Angular Documentation：

将 ::ng-deep 伪类应用于任何 CSS 规则会完全禁用该规则的视图封装。 应用 ::ng-deep 的任何样式都将成为全局样式。为了将指定样式限定为当前组件及其所有后代，请确保在 ::ng-deep 之前包含 :host 选择器。如果在没有 :host 伪类选择器的情况下使用 ::ng-deep 组合器，则样式可能会渗透到其他组件中。

/deep 和 ::ng-deep 是相同的，除了 ::ng-deep 受 SASS 支持，（两者都被标记为已弃用，应避免使用）

【讨论】：

【解决方案2】：

来自：Adam Freeman 的书“Pro Angular 9”。：

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

:主机 该选择器用于匹配组件的宿主元素。

:host-context(classSelector) 此选择器用于匹配作为特定类成员的宿主元素的祖先。

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

【讨论】：