Я создаю несколько пользовательских веб-компонентов для их повторного использования в нескольких проектах, что прекрасно работает.Поскольку мы хотим, чтобы они изначально были независимыми, я использую encapsulation: ViewEncapsulation.Native.Итак, каждый из этих веб-компонентов создает собственный теневой корень, который содержит шаблон компонента.
Сейчас я пытаюсь создать более сложные веб-компоненты, использующие те, которые я уже создал ранее.Как только я собираю, упаковываю и запускаю это на http-сервере, он не работает, и chrome отображает эту ошибку в консоли: Uncaught DOMException: Failed to execute 'createShadowRoot' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.
Так что после небольшого поиска в Интернете я нашелвыходит, что нельзя иметь вложенные теневые корни.Поскольку каждый пользовательский веб-компонент создает свой собственный корневой каталог, как я могу повторно использовать мои компоненты в более сложных?
[Редактировать / Дополнительная информация]
Я использую
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-сервере