问题标签 [angular2viewencapsulation]

查看有关 ShadowDOM 的文章，它似乎是对 DocumentFragments 的增强。ShadowDOM 的真正好处是什么？CSS 特异性？我不能用 Fragments 做大致相同的事情吗？

我正在寻找每个功能的列表。例如，两者似乎都允许您在内存中和主渲染路径之外组装 dom 树。然而，ShadowDOM 似乎具有作用域 CSS 的额外好处。

在哪些情况下您会使用 ShadowDOM，而您只想使用 DocumentFragments？

更新

在我自己对此进行了更多研究之后，我发现这两种技术是完全正交的。

注意：由于问题已关闭，我无法自己回答。我最初将我的发现的细节放在下面的评论中，但我想更多的人会在这里查看文本。

Document Fragments是一个 Javascript/DOM 构建工具，用于在 DOM 之外创建非分层的节点集合（每个节点都可以是其他节点的父节点）。它们本质上是节点集合的包装器，一旦将片段附加到 DOM，它就会被放弃。DocumentFragments 允许您在同一级别收集多个节点，并将它们作为兄弟节点附加到另一个 DOM 节点。

Shadow Dom就是在更大的渲染 DOM 中隔离副作用。ShadowDom 允许您创建具有封装样式的沙盒可重用组件。当基于 ShadowDom 的组件添加到更大的 Web 应用程序时，其 CSS 样式不会泄漏到应用程序的其余部分，应用程序自身的样式也不会影响组件的呈现。

请注意，CSS 组合器（例如/deep/和::shadow）用于样式化（和选择）来自父 dom 的 shadowDom 组件，但这些组合器在不久的将来会被弃用。因此，建议使用 ShadowDOM 的可重用组件依赖 CSS 变量进行样式设置，如果它们打算由使用它们的应用程序自定义。

我将 Angular2 与Material Design Components一起使用。并且想覆盖一些样式，但是由于ViewEncapsulation，它看起来不可能。

是否可以关闭第 3 方组件的ViewEncapsulation (ViewEncapsulation.None)？

我有一个 Home 组件，里面有这个：

在我的 home.style.scss 中，我有这个：

这应该将背景颜色更改为绿色，但事实并非如此。

上面的 css 代码将产生这种风格：

最终的 HTML 如下所示：

我不知道这里有什么问题，但我认为选择器是错误的。我希望最终的选择器是：

代替：

或者换句话说，为什么没有 _ngcontent-wjn-3 属性<div class="alert">...</div>？

也许我做错了整个事情。我想要实现的是自定义我内部<alert>的 ng2-bootrap 库（https://github.com/valor-software/ng2-bootstrap）提供的各个引导组件（在上面的代码中）的 CSS自定义组件（<home>在上面的代码中）。

我在 home 组件中使用默认视图封装（模拟）。

请问我该怎么做？

在 Angular 2 中，我试图从其容器的样式表中设置组件实例的样式

很显然，我已经ViewEncapsulation.None入驻了my-component.ts。

我的容器样式：

基本上我很困惑，禁用 ViewEncapsulation 后，选择器仍然需要/deep/跨度来获取红色样式。除此之外，我有点不确定我应该使用哪种类型的选择器，/deep/并且::shadow据说已被弃用。战场上剩下的，似乎只有三重>合体了>>>。

反过来，手写笔或 WebStorm 似乎都不支持/理解这一点。结果是重新格式化代码完全破坏了样式代码。

除了我正在使用的方法之外，还有其他方法可以为我的 span 元素编码 css/styl 选择器吗？

编辑

在尝试研究未来的计划时，我查看了规范草案- 就在第 3.2.6 节之前，它说：

对于外部文档中的样式表，选择器 x-foo >>> span 选择所有三个元素：#top、#not-top 和 #nested。

但随后它指出：

穿透阴影的后代组合器是选择器的静态配置文件的一部分，而不是动态配置文件的一部分。这意味着它可以在例如 querySelector() 方法中使用，但在 stylesheets 中使用时无效。

我不明白。

我是初学者，这里使用的术语可能没有正确应用。

我的应用程序包含三个组件。来自Project Clarity的一个外部组件clr-datagrid

在搜索结果组件中，

问题是，

当我使用 ViewEncapsulation。Emulated、clearance- icons.min.css '、clearance-ui.min.css 不适用于嵌套组件/自定义元素。

当我使用 ViewEncapsulation。Native , 它只在 Chrome 和 Opera 浏览器中正常工作。但不在 IE/Firefox/Safari 中。

当我使用 ViewEncapsulation。None，工作正常，但 CSS 溢出并影响 searhform cmp 样式。

我从在线阅读中了解到，问题出在 Shadow DOM 上，只有 Chrome 支持 Shadow DOM，其他不支持。我尝试使用webcomponents polyfill

<script src="../../../node_modules/webcomponents.js/webcomponents-hi-sd-ce.js"></script>在 index.html 中（可能不是正确的方法）。

任何人都可以帮助我如何将清晰的 css 和图标仅应用于组件，并且不会影响应用程序的其他部分？

我想覆盖我正在使用的开源组件的样式，但我能找到禁用视图封装的唯一方法是在组件的装饰器上。当然，使用第三方模块意味着我无法编辑它的源代码。还能怎么做？

编辑

我知道 /deep/ 样式建议。我想要做的是使用 bootstrap 4 中的样式覆盖第三方组件中的表格样式。自定义组件应用了一个 .table 类，但是通过视图封装，boostrap 4 类无法访问它。

我只想知道是否有一种方法可以完全禁用视图封装，而无需分叉代码并添加组件装饰器属性值“封装：ViewEncapsulation.None”供我自己使用。

我正在尝试通过以下方式将图像设置为整个页面的背景：

app.component.html

app.component.ts（注意：封装设置为无）

app.component.css

问题是，当使用 [ngStyle] 时，图像仅覆盖页面的标题部分。

如果不是 ngStyle，我直接选择正文，例如：

图像覆盖了整个页面，这是我想要发生的。但是有人告诉我直接选择身体是不好的做法。

如何让 [ngStyle] （或其他任何东西）创建覆盖整个页面的背景图像？

谢谢

我在一个视图中使用了几个图表，每个图表都是它自己的组件。我有一个 LineChartComponent 和一个 XRangeChartComponent。我正在使用带有 XRangeChartComponent 的样式文件并覆盖一些类。但是这些样式没有在图表中应用。

经过检查，我发现样式文件被angular修改为附加一个类以符合shadow DOM。所以，我在 XRangeChartComponent 中使用了封装：ViewEncapsulation.None。现在样式也被应用于 LineChartComponent。

我该如何进行？

我附上的演示有 2 个折线图，但它重现了我的问题。

https://stackblitz.com/edit/angular-highcharts-styling

由于我的角度组件中 VIEWENCAPSULATION.NONE 的样式问题，我切换到 .EMULATED

现在，我无法进行最简单的 CSS 更改。

保存在组件 css 文件中的样式，而不是全局 css 文件中。

例如，在 mat-tab 元素中，我想让字体加粗。在 chrome 的 devtools 中即时执行此操作，效果很好。这也适用于之前没有视图封装的情况。

现在没有了。像这样的简单变化让我难以捉摸......

这是我的 html 和以前工作的 css（没有封装）。

我已经尝试了以下所有方法，没有任何效果。有人可以指出正确的方法吗？谢谢！

如何将 CSS 范围仅限于 Angular 中的一个模块？当我懒惰地加载一个模块并在该模块中有 ViewEncapsulation.None 时，CSS 会渗入我的应用程序的其他部分。知道如何防止这种情况，或者仅在 Angular 5 中为该模块保留该 CSS 吗？