创建托管Angular小部件时的Angular完全封装

我有一个角度小部件，应该嵌入在不同的网站，我不知道的网站，将嵌入它

我无法将小部件放置在IFrame中

这意味着小部件应该100%封装

小部件正在使用某些库中的组件，如：

角自举

@角/材料

这些库中的一些组件使用的视图封装设置为“无”，这意味着一个问题是我的头部将包含以下内容：

.mat-checkbox {...}

这是不好的，因为它可能会干扰宿主站点样式

另一个问题是我负担不起像.mat checkbox这样的类名 因为这意味着宿主站点可以加载材质设计模板并更改我的小部件外观

我研究了其他公司的解决方案，如hotjar

它们不放在iframe中，它们只是散列它们的类名（可能使用js中的css库，如typestyle或postcss），这对我来说是一个很好的解决方案，但是

如何散列第三方库（如material design和angular bootstrap）中组件的类名？

我尝试过的事情：

• 用于创建web组件的角度元素

• 字体

---

有一件事你可以尝试，那就是用

ngAfterViewInit

生命周期钩子遍历小部件中的所有节点，并用

Renderer2

以你喜欢的方式修改类。TreeWalker受domino支持，因此它甚至可以与Angular Universal一起工作。

您已经编写了您尝试过的Angular元素，但没有提到您是否面临任何问题。我正在创建一个项目，它位于其他人的项目中，并在运行时分析他们的项目。对我来说，角度元素非常适合。如果在根组件中使用

enclosuration:viewenclosuration.ShadowDom

，则样式将自动确定范围。您也可以在非角度项目中使用它们。

TreeWalker或MutationObserver是了解发生更改的好方法，是的，我可以使用Renderer2。此解决方案将用于更改类名。就性能而言，最好只反映私有平台浏览器服务：DefaultDomRender2，它同样适用于我，具有更好的性能。我现在遇到的问题是，我还需要更改样式以匹配那些类名，因此我需要以某种方式更改角度材质样式，并将这些类名散列，然后将它们与DOM中更改的类名匹配。我尝试了使用角度元素的ViewEncapsulation.ShadowDom。问题在于嵌入带有ViewEncapsulation的第三方组件时。例如@angular/material BottomSheet。这样的组件，即使它们嵌套在带有ShadowDom的my元素中，仍会将其样式写入宿主样式的头部部分。尝试将底部表单嵌入小部件中，并检查头部部分，您将看到这些样式。