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