Question

我正在创建多个自定义Web组件，以便在多个项目中重用它们，这很好。由于我们希望它们最初是独立的，我使用encapsulation: ViewEncapsulation.Native。因此，这些Web组件中的每一个都在创建它自己的shadow-root，其中包含组件的模板。

我现在正在尝试创建更复杂的Web组件，这些组件使用的是我之前创建的组件。一旦我在http服务器上构建，打包并运行它，它就不起作用，并且chrome在控制台中显示此错误：Uncaught DOMException: Failed to execute 'createShadowRoot' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.

因此，在互联网上搜索了一下后，我发现它不允许嵌套阴影根。由于每个自定义Web组件都在创建自己的阴影根，因此如何在更复杂的组件中重新使用我的组件？

[编辑/添加信息]

我用

const myCustomEl= createCustomElement(CustomElComponent, { injector });

然后

customElements.define('custom-el', myCustomEl);

然后我构建它并用

打包它

 jscat ./dist/framework/runtime.js ./dist/framework/polyfills.js ./dist/framework/scripts.js ./dist/framework/main.js > miZipFramework.js.gz

在我的http服务器上运行之前

Answer 1

我遇到了类似的问题，唯一对我有用的是将封装从Native更改为Emulated。

我还在这里找到有关此问题的信息：https://github.com/angular/angular/issues/24397

创建嵌套的自定义角度Web组件

1 个答案: