css - 如何关闭 Angular 2 中一个属性的 View 封装？

Question

我有以下样式:

#right_content {
  padding: 30px 40px !important;
}

我将其存储在一个文件中 register.css ，绑定(bind)到我的 register.ts .

问题是 <div id="right_content">位于父模块中，这意味着我无法直接从 register.ts 中修改其 CSS 属性.

<div id="right_content">
  <router-outlet></router-outlet>
</div>

我的 register.html和 register.css进入路由器 socket 。我想为 #right_content 设置样式来自 register.css .

有什么方法可以关闭 View 封装(或任何添加 _ngcontent-mxo-3 属性的调用)，仅针对上述样式？

Answer 1

更新

::slotted现在所有新浏览器都支持并且可以与 `ViewEncapsulation.ShadowDom 一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

原创

即使在ViewEncapsulation 时也支持创建穿过组件边界的选择器。是Emulated (默认)

child-component ::ng-deep #right_content {
  padding: 30px 40px !important;
}

允许平铺 <xxx id="right_content">来自任何祖先