Css 角度7：为什么类样式不应用于DOM组件？

我有一个包含Ng引导组件的组件账单

ngb选项卡集

具有以下DOM元素：

<ngb-tabset _ngcontent-c3="" class="content">
  <!-- Tabset links-->
  <div class="tab-content">
    <div _ngcontent-c3="">
      <!-- Content -->
    </div>
  </div>
</ngb-tabset>

CSS代码已正确编译，通常由导航器查看，但不会对项目产生影响

但是，如果我将其应用于组件外部的项，代码将正常工作

了解这种奇怪的行为吗？

方法1-在选项卡内容模板中设置样式类 隔离每个组件的CSS样式，防止父组件CSS影响子组件。本例中的首选解决方案是在选项卡内容模板定义中设置样式类。以下是一个例子：

<ngb-tabset>
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <div class="my-style-1">
        <p>Some content</p>
      </div>
    </ng-template>
  </ngb-tab>
  ...
</ngb-tabset>

请参见演示

---

方法2-使用：：ng deep伪类选择器 另一种方法是对

NgbTabset

子组件的内容使用

：：ng deep

阴影穿透后代组合器：

::ng-deep .tab-content {
  padding-right: 120px;
}

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

请参见演示

---

方法3-关闭视图封装 或者，可以关闭父组件的视图封装：

::ng-deep .tab-content {
  padding-right: 120px;
}

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

---

请参阅以获取演示。

Angular使用阴影DOM。这意味着它将DOM逻辑与其他元素分开。组件有自己的范围样式。它们的封装方式不应使样式全局生效。所以，如果你想改变ngb标签集的风格，你必须走出它的范围。这就是为什么需要使用ViewEncapsulation.None

在@Component decorator中使用ViewEncapsulation.None

@Component({
selector: ....,
encapsulation: ViewEncapsulation.None,
styles: [...])} 

---

而且，您还可以使用ng deep。但是您不应该使用ng deep，因为它将被弃用。请看这里-

我想我可能对方法2有一些看法，目前这种方法仍然有效，但angular团队不赞成这种方法@JamieRees-是的，

：：ng deep

不受欢迎，但我同意关于该主题的结论：使用它，直到Angular指定可以使用什么。我使用方法3，它工作正常。方法1没有效果，可能是因为视图封装。@clem-方法1应该可以与视图封装一起工作，如中所示。