我有一个带有自定义 HTML 元素的 Angular 2 应用程序，如下所示：
<custom1>
<div id="div1">
<div id="div2"></div>
<custom2>
<div id="div3"></div>
</custom2>
</div>
</custom1>
在组件 custom1 我有这个 css：
div {
border-style: solid;
}
这种样式适用于元素 div1 和 div2，但不会传播到元素 div3。
如何在不为 custom2 编写特定 CSS 的情况下将 custom1 的 CSS 属性传播到 custom2 中？
如果相关：custom1 包含在 Bootstrap 网格容器中。
【问题讨论】：
您可以在 custom1 组件上将 View Encapsulation 设置为 None：
@Component({
templateUrl: './custom1.component.html' ,
styleUrls: ['./custom1.component.css'],
encapsulation: ViewEncapsulation.None,
})
我提供的链接中的片段：
组件的 CSS 样式被封装到组件的视图中，并且 不要影响应用程序的其余部分。
要控制这种封装如何在每个组件的基础上进行， 您可以在组件元数据中设置视图封装模式。 从以下模式中选择：
Native 视图封装使用浏览器的原生 shadow DOM 附加影子 DOM 的实现（参见 MDN 站点上的 Shadow DOM） 到组件的宿主元素，然后将组件视图 在那个影子 DOM 里面。组件的样式包含在 影子 DOM。
Emulated 视图封装（默认）模拟 通过对 CSS 代码进行预处理（和重命名）来处理 shadow DOM 的行为 有效地将 CSS 范围限定为组件的视图。有关详细信息，请参阅 附录一。
None 表示 Angular 没有视图封装。 Angular 将 CSS 添加到全局样式中。范围规则， 前面讨论的隔离和保护不适用。这是 本质上与将组件的样式粘贴到 HTML 中相同。
【讨论】：
<div class="custom1">...</div> 然后，在你的 css 文件中：.custom1 p { ... } 这样，p 的样式将仅适用于 custom1 及其子项下的标签。