Angular 中的 CSS 封装

什么是 CSS 封装

CSS 封装允许将样式的范围限定在特定组件或可重复使用的代码段中。使用基于组件的架构时，开发人员可以控制样式如何应用于应用程序的各个部分。样式可以应用于特定组件，而不会对其他元素产生副作用。虽然浏览器开始原生支持通过使用Shadow DOM创建的自定义元素来创建组件并限定其样式的范围，但支持仍然有限。

Angular 带有现成的 CSS 封装。生成新项目时，默认将项目根目录中的style.css文件全局应用于应用程序，并针对组件样式（例如 foo.component.css 中的样式）应用 CSS。

      @Component({
 selector: 'app-foo',
 templateUrl: './foo.component.html',
 styleUrls: ['./foo.component.css']
})
    

只适用于 foo 组件，不适用于其他任何地方。但这并不是在 Angular 中封装样式的唯一方法，让我们仔细看看。

角度封装选项

为了探索 Angular 中可用的每个视图封装选项之间的差异，请考虑具有以下代码和结构的应用程序：

示例应用程序

（完整代码，角度版本：6.1.0，cli 版本：6.1.5）

使用 CLI 我们生成一个包含两个组件的项目，第一个组件和第二个组件。

      $ ng new encapsulation --styles=”scss”
$ cd encapsulation
$ ng g c first
$ ng g c second
    

这将生成一个使用 SCSS 且默认视图封装类型为 Emulated 的 Angular 应用。让我们添加一些元素和样式。

根元素

index.html（部分）：

      <body>
 <h1>CSS Encapsulation</h1>
 <app-root></app-root>
</body>
    

样式.scss

      p {
  color: #333; // dark gray
  font-family: sans-serif;
}

h1 {
  color: #3888a3; // purple
}

h2 {
  border-bottom: solid 1px #896ac8;
  color: #896ac8;
}
    

应用程序.组件

应用程序.组件.html：

      <main>
 <h2>My Components</h2>
<app-first-component></app-first-component> <app-second-component></app-second-component>
</main>
    

第一组分

首先.组件.html：

      <section>
 <h3>First Component</h3>
 <p>Phasellus augue ante, lobortis pulvinar euismod sit amet, auctor vel nisl...</p>
</section>
    

第一个.组件.scss：

      p {
  background: #ffe9b5; // pale orange
  border-radius: 4px;
  font-family: cursive;
  padding: 1rem;
}

h3 {
  color: #a17200; // brown
  text-align: center;
}
    

第二成分

第二.组件.html：

      <section>
 <h3>Second Component</h3>
 <p>Nulla viverra ligula consequat tellus luctus semper. Sed a magna finibus... </p>
</section>
    

当使用模拟封装时，我们的应用程序如下所示：

模拟

默认选项为“模拟”。无论您使用的是 SASS、SCSS、LESS、Stylus 还是纯 CSS，样式都会经过预处理。每个选择器都会添加一个主机元素属性，将样式范围限定在主机元素内。

每个 DOM 元素都附加有_ngcontent属性，该属性自动生成，且对于其主机是唯一的。这些属性标识了元素属于哪个主机，因此应该对其应用哪些样式。

结果是，尽管我们为first.component中的p和h3元素添加了样式，但这些样式并没有应用于second.component的元素。

但是， styles.scss中的样式会全局应用于应用程序，并应用于所有组件，包括app.component和index.html。

影子王国

设置ShadowDom视图封装后，应用将使用浏览器的原生影子 DOM 实现。通过为每个元素添加单独的隐藏或“影子”DOM 来封装元素。

当使用ShadowDom封装的时候我们的应用看起来是这样的：

每个组件都附加有一个影子 DOM 树，影子根附加到组件元素。查看first.component，影子根附加到组件本身（<app-first-component>），组件内部的元素（<section>、<h3>、<p>）组成影子树。

请注意，与模拟封装不同，没有向元素或类添加任何属性。

与模拟封装的另一个区别在于全局样式，这些样式来自styles.scss 。请注意app.component.html中的“我的组件”标题和第二个组件段落的样式。它们缺少之前通过styles.scss应用于它们的样式。与index.html中保留样式的“CSS封装”标题不同，组件已完全与全局样式隔离。

限制

ShadowDom 封装有一些需要注意的限制。并非所有浏览器都完全实现了 Shadow DOM。根据caniuse.com的说法，Chrome 是唯一一款完全实现了 Shadow DOM v1 和 v2 的主流网络浏览器，此外还有几款移动浏览器。在 Safari 中测试时，该应用程序似乎可以运行，但是无法在 Firefox 中加载。由于支持有限，目前建议使用 Emulated 而不是使用 ShadowDom 封装。

本国的

原生视图封装现已弃用。与 ShadowDom 封装类似，它使用浏览器的原生 shadow DOM 实现，但它使用的是版本 0，而版本 0 现已弃用。

没有任何

None，顾名思义，删除所有封装。任何样式表中的样式，无论是否直接应用于组件，都将全局应用于应用程序。

注意second.component。它现在的样式与first.component相同。全局样式 ( styles.scss ) 已正常应用，但是，组件特定样式（例如first.component中的样式）已应用于这两个组件。

遗产

为了演示继承，我们将向second.component添加一些样式。

第二个.组件.scss

      p {
  background: #caf2ff; // light blue
  font-family: monospace;
}
    

提醒一下，first.component.scss有以下样式

第一个.组件.scss

      p {
  background: #ffe9b5; // pale orange
  border-radius: 4px;
  font-family: cursive;
  padding: 1rem;
}

h3 {
  color: #a17200; // brown
  text-align: center;
}
    

<img data-cmp-is="ps-image" src="https://i.stack.imgur.com/N7qNtM5.png" class="ps-image s

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文