css - 是否可以为所有 Angular "hosts"编写 CSS，或者我们是否必须单独选择每个主机

Question

Angular documentation :host 没有提到我们可以同时设置所有宿主元素的样式。我在“全局”级别添加了这个 CSS:

:host {
    width: 100%;
}

但是没有效果。但是，这在组件级别的 CSS 中运行良好:

:host(app-search) {
    width: 100%;
}

app-search 是一个组件，app-search.component.ts。

是否可以为所有组件编写一个 :host 选择器，或者必须在组件级别多次声明它？

Answer 1

根据其定义(或规范)，:host 永远不能在全局级别使用。创建它是为了从组件级别使用并选择父组件(称为shadow host)从子组件(称为影子树).

为了进一步说明，Angular 的:host 选择器是来自shadow DOM 样式范围 世界的特殊选择器(在CSS Scoping Module Level 1 页面上的W3C site 中有描述) ).

angular 文档明确指出，您应该使用此选择器从子组件中选择父组件。但是，如果您不知道 shadow tree 的工作原理，您可能会觉得不清楚。 see the documentation .

如果您需要为全局样式表中的任何组件设置样式，Angular 会在全局范围内自动添加一个 style.css 文件。只需将您的 CSS 放入该文件，您就可以在所有组件中找到全局可用的它。

组件级 CSS 文件使您的 CSS 模块化。这是一个很棒的功能，因为:

• 您可以使用最能发挥作用的 CSS 类名和选择器在每个组件的上下文中有意义。
• 类名和选择器是组件的局部名称，不会与类名和选择器冲突在应用程序的其他地方使用。
• 在其他地方更改样式应用程序不会影响组件的样式。
• 你可以在同一地点每个组件的 CSS 代码与 TypeScript 和 HTML 代码组件，这导致了一个整洁的元素结构。
• 你无需搜索即可更改或删除组件 CSS 代码整个应用程序以查找代码的其他使用位置。

虽然它是可配置的，但我强烈建议不要使用 ViewEncapsulation.None。它会杀死你所有的 CSS 模块化，你可以轻松地使用全局 CSS 文件而不影响范围限制。