css - 在 Less 样式表中使用 Angular 组件名称与生成的 DOM 不匹配

Question

我通过学习 Udemy 类(class)来学习 Angular，我的风格是这样的:

server dl {
    display: flex;
}

和 server 组件，它不工作。该样式不适用于 html。因为生成的样式看起来像这样:

server[_ngcontent-c1]   dl[_ngcontent-c1] {
  display: flex;
}

DOM 看起来像这样:

<server _ngcontent-c0="" _nghost-c1="">
   <dl _ngcontent-c1="">
     <dt _ngcontent-c1="">Plantform</dt>
     <dd _ngcontent-c1="">Linux x86_64</dd>
   </dl>
</server>

_ngcontent-c0 而不是 _ngcontent-c1，为什么会这样？为什么样式与 DOM 不匹配？

我正在使用由 CLI 和 Less 生成的 Angular 应用程序(但我使用 server 作为选择器手动创建了组件，如果名称是 app-server).

为什么添加这个属性选择器？如果我在不同的地方使用这个组件呢？我想匹配组件内的所有元素，这就是为什么我添加了 server 作为选择器以始终匹配该组件内的所有元素。

如何使用添加到 html 的组件名称作为我整个样式的根？或者这在 Angular 中不是很好的做法，而是以其他方式处理，如果有人可以解释一下？

Answer 1

组件的每个元素都使用您注意到的那些属性通过 Angular (根据 css spec for scoping )自动限定范围/填充。所以基本上，当你为该组件编写 css 时，你不必编写 component-name element 但你可以只写:

dl {
    display: flex
}

Angular 将通过使用生成的属性确保此样式仅应用于 server 内的 dl，它本质上是用于 css 范围的 polyfill。如果您所有的目标浏览器本身都支持 css 范围，您甚至可以设置 ViewEnacpsulation.Native

在某些情况下，您决定设置根元素的样式时，您必须使用特殊选择器 :host

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.

所以不要写 server {background: red} 你要写 :host {background: red}

这也符合用于范围界定的 css 规范。

阅读更多关于 CSS coping 和 component based CSS 以了解更多关于此策略的信息。

作为入门阅读 base documentation in Angular

另外，请注意，您可以像以前那样将您的 css 添加到任何全局样式表:

server dl {
    display: flex
}

选择哪种方式在很大程度上取决于您计划如何管理和扩展 css。