问题标签 [angular2viewencapsulation]

随着Chrome Version 80.0.3987.87 (Official Build) (64-bit)我的 Angular 应用程序的最新版本突然停止工作。在对问题进行故障排除时，在控制台日志中发现错误“createShadowRoot 不是函数”。

在我们应用程序的几个 Angular 组件中，我们使用了 ViewEncapsulation 策略 Native，如下所示

encapsulation: ViewEncapsulation.Native

似乎使用最新版本的 Chrome，对 Shadow Dom v0 的支持已被删除（如下所示）

似乎解决方案是将 ViewEncapsulation 策略从 Native 替换为 ShadowDom，如下所示

问题：

更改 ViewEncapsulation 策略后，我的应用程序开始工作。问题是，

• ViewEncapsulation.ShadowDom 是 ViewEncapsulation.Native 的替代品吗？（影子 DOM v0 与 v1）
• 除了更改 ViewEncapsulation 策略之外，我还需要更改/检查什么？
• 我应该在我的应用程序中检查哪些其他影响以确保我的应用程序无缝运行
• 我们应该预料到的任何其他风险？

注意：我的应用程序仅在 Google Chrome 上受支持。

我有一种情况，我正在使用 jQuery 插件来调整div. 使用模拟视图封装时，此元素未获取样式表中样式的属性前缀以作为目标。这是有道理的，因为我在没有 Angular 知识的情况下修改 DOM（我知道这不是最佳实践）。

从插件创建的元素 - 没有属性

<div class="ui-resizable-handle ui-resizable-e custom-pointer" style="z-index: 90;"></div>

以角度 HTML 定义的元素 - 带有属性

<div _ngcontent-fav-c294 class="inner-container"></div>

我宁愿继续对这个组件中的所有其他内容使用 Emulated ViewEncapsulation，以防止任何样式泄漏。

我想知道我是否可以在没有 ViewEncapsulation 的情况下从我的样式表中定位一个类？或者，如果有人对如何最好地解决这个问题有任何建议？

提前致谢。

我们在html-element 上使用一个类来确定用户是否处于应用程序中dark或light模式。

此类是Renderer2在检测用户所选设置的服务中添加的。到目前为止，这工作正常。

现在，我们必须调整所有组件，使其在黑暗模式下也看起来不错。但问题是 Angular 的ViewEncapsulation.

我们认为会派上用场的是简单地更新组件的 SCSS：

或者在纯 CSS 中：

现在这不起作用，因为该类.dark-mode似乎已按预期进行了封装。

我们如何解决这个问题？

我发现自己切换到 ViewEncapsulation.None 因为我需要操作一些子组件的 css，这对于 View 封装来说似乎是不可能的，因为 /deep/ 已被弃用。

如果我的样式手动限定为组件，那么不使用 ViewEncapsulation 是否有任何实际（可能是性能？）缺点？这似乎能够正确操纵子组件的样式：

使用 Angular 5 向第三方组件 A 添加一些 css。

在这个第三方组件 AI 中添加了另一个第三方组件 B。

为了让第三方组件 A 工作，我必须将其组件 A 的 css 文件添加到样式属性下的 angular.json 中。（这就是组件 A 的构建方式。）

如果我这样做。组件 A 和组件 B 都具有正确的 css。组件 A 的 css 不会影响组件 B 的 css。

由于一些公司限制。我不允许这样做。

所以我必须通过组件:host ::ngdeep like this 的home-to-component-A-component.scss文件添加组件A的csshome-to-component-A-component

然后定期添加这个scss home-to-component-A-component，

有效。但它完全弄乱了位于组件 A 内部的组件 B 的 css。因为组件 A 的某些 css 覆盖了组件 B 的 css。（他们使用不同的类名）

如果我使用组件 Aencapsulation: ViewEncapsulation.None的 css 将 css 添加到组件 A 也会以同样的方式弄乱组件 B 的 css。

我想深入了解，使用:host ::ngdeepVS 将 css 添加到angular.json. 尤其是这些将如何影响组件的 css 屏蔽。

当特定组件（在我的情况下，登录组件）可见时，我想更改正文背景颜色登录组件是使用应用程序组件的路由器插座加载的。

我尝试在登录组件的 css 和 set 中添加正文背景颜色样式表encapsulation: ViewEncapsulation.None，它可以工作，但它也改变了整个应用程序的背景颜色。

有没有办法在加载特定组件（在我的例子中是登录组件）时只设置正文样式表？

我正在处理一个 Angular 11.2 项目，我看到一个组件的 CSS 正在应用于另一个具有相同 css 选择器名称的组件。我怎样才能阻止这个？请帮忙

我在我的组件中使用了一个外部组件。我想在这个外部组件上做一些样式。由于 Angular View Encapsulation，我在组件中定义的所有 css 都不会传播到我的 html 模板中使用的这个外部组件。为了启用这种传播，我设置

这样可行。但是后来我的 css 被应用于我的整个项目，而不仅仅是特定的组件。我需要以某种方式告诉 Angular：“将此 css 应用于此组件及其所有子组件，以及外部组件”。这有可能吗？

1. 我有 2 种类型的组件，i) 登录前 ii) 登录后

2. 想为两个父组件添加 2 个不同的 css，

3. 使用ViewEncapsulation.None它也适用于兄弟组件，这是代码的结构

4. 如果我在ParentComponent1中添加 CSS，那么它仅适用于 ChildComponent1.1 和 ChildComponent1.2 而不是 2.1 和 2.2，同样适用于ParentComponent2

有没有办法删除ViewEncapsulation.None或仅在子组件中应用 CSS 而不是在兄弟组件中