Блог

Вот как я это сделал. Я создал 2 веб — приложения.

1. Веб-приложение 1 размещено на локальном хосте 8081 с использованием веб-компонента для встраивания 2-го приложения в теневой дом.
2. Веб-приложение 2, размещенное на локальном хосте 4200, служит простым приложением для запуска Angular.

Вот как я попытался встроить веб-приложение 2 в теневой дом веб-приложения 1.

 const url = 'http://localhost:4200'; // angular starter app
fetch(url)
  .then(response => response.text())
  .then(html -> {
    const shadow = this.container.attachShadow({mode: 'open'}); // container is just a div
    shadow.innerHTML = html;
});
 

В итоге я получил следующую структуру DOM.

Как видно, ресурсы из веб-приложения 2 преобразуются в базовый URL-адрес веб-приложения 1 localhost 8081, который не сможет загружаться, поскольку эти ресурсы расположены на локальном хосте 4200.

Я делаю что-то не так? Является ли это даже хорошим вариантом использования для использования shadow DOM вместо использования старомодного способа iframe для встраивания другого веб-приложения?

Я читал некоторые статьи, подобные этой, в которых подразумевается, что shadow DOM является правильным инструментом (или заменой iframe) для встраивания внешнего содержимого, хотя на самом деле не говорится, должно ли содержимое быть свободным от JavaScript или других внешних ресурсов, чтобы оно работало.