查看 Angular Elements 文档,它展示了如何使用影子 DOM(即 Web 组件(创建一个封装的可共享组件,但我的公司有一个全局样式指南,所以我们需要所有组件都具有相同的样式。我们如何在没有封装(即 HTMLElement(的情况下在 Angular 中创建自定义元素并能够在整个组织中共享它们?
TLDR;
是的 - 实际上它是默认值,只是不要使用encapsulation: ViewEncapsulation.ShadowDom
.
堆栈闪电战示例
一些细节
不要被 Web 组件中涉及的许多规范所迷惑。 当从Web组件说话时,通常我们假设它具有样式封装,因为它使用Shadow DOM,但这不是强制性的。
Angular使用自定义元素来封装一个自引导的 Angular 组件。默认情况下,这个 Angular 组件不使用 Shadow DOM,除非您使用encapsulation: ViewEncapsulation.ShadowDom
.
显式定义,因此默认值只是一个自定义元素,可以使用全局 CSS 完美地设置样式。