ViewEncapsulation.ShadowDom 和 Primeng。并非所有样式都呈现答案

【问题标题】：ViewEncapsulation.ShadowDom and Primeng. Not all styles are presentedViewEncapsulation.ShadowDom 和 Primeng。并非所有样式都呈现
【发布时间】：2021-09-22 16:08:17
【问题描述】：

我使用的是Primeng数据表，需要对列进行过滤。

问题是我启用了 ViewEncapsulation.ShadowDom 但没有为过滤器提供样式，就好像根本没有 CSS。但是对于表格，您可以看到一些样式在我的 history-changes.component.css 中，我导入了样式。

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~primeng/resources/themes/saga-blue/theme.css';
@import '~primeng/resources/primeng.min.css';
@import '~primeicons/primeicons.css';

在我的 ts 文件中查看封装

@Component({
  selector: 'app-history-changes',
  templateUrl: './history-changes.component.html',
  styleUrls: ['./history-changes.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom,
})

顺便说一下过滤器的工作方式。只是缺少样式的问题。

错误截图：

【问题讨论】：

标签： css angular primeng

【解决方案1】：

因为 shadowDom 内部所有的东西都被封装了，所以你需要将 CSS 附加到你的组件 Shadow Root 中。这就是我正在做的，它工作正常：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.scss',
    "../../../../node_modules/primeng/resources/themes/saga-blue/theme.css",
    "../../../../node_modules/primeng/resources/primeng.min.css"
  ],
  encapsulation: ViewEncapsulation.ShadowDom
})

注意全局样式（你写在styles.scss）或者你在component.scss里面写@import它们都不起作用，这里我们需要inline style，同时@import将从URL导入样式（或路径）。将它们放入 styleUrls 就可以了，因为在构建时 Angular 会读取您的样式并将其导入到您的组件中

【讨论】：

谢谢你的回答，我照你写的做了。不幸的是，同样的行为，顺便说一句，错误=>错误类型错误：无法在“窗口”上执行“getComputedStyle”：参数1不是“元素”类型。
针对“getComputedStyle”的错误。在这里检查我的包，它解决了这个问题：github.com/maitrungduc1410/primeng-shadowdom-directives
对于样式问题，我不知道为什么它对您不起作用，在我的公司中，我们正在这样做并且它工作得非常好:)。我们有一个用 Angular + PrimeNg 编写的大项目需要导出为 Angular Element，后来我们把它作为 Web Component 项目的一部分，它们都显示得很好
再次感谢您，我很高兴有您这样的人愿意提供帮助。我不知道为什么它不适用于样式。关于你的包，如果你有时间，也许你会为元素写一些东西？