Почему веб-компонент не распознается в новом окне? - PullRequest
Новая
       3

Почему веб-компонент не распознается в новом окне?

1 голос
/ 06 апреля 2020

Я пытаюсь открыть свой веб-компонент в новом окне (нажатием кнопки в приложении Angular). Наиболее близким к моему желаемому результату является следующий подход: 

openPopup(): void {
    const popup = window.open('', '_blank', 'width=50');
    const component = document.createElement('component'); 
    popup.document.body.appendChild(component);
}

Обратите внимание, что я создаю элемент внутри документа, а не в popup.document. Это работает, однако, изображения SVG загружаются неправильно, вероятно, потому что он создал его в другом документе ..

По сравнению с созданием элемента в popup.document 

openPopup(): void {
    const popup = window.open('', '_blank', 'width=50');
    const component = popup.document.createElement('component'); 
    popup.document.body.appendChild(component);
}

Это последнее Кажется, что этот подход лучше всего подходит, но он просто не дает никакого вывода HTML, за исключением компонента тега HTML. Поэтому он по какой-то причине не распознает компонент в новом окне.

Что я могу сделать?

1 Ответ

1 голос
/ 06 апреля 2020

Каждое окно имеет свою собственную модель DOM, поэтому каждое окно имеет свою собственную customElementsRegistry

. При открытии другого окна все требуемые пользовательские элементы должны быть определены (пере) * 1006. *. 

  function defineElement(root = window) {
    root.customElements.define('my-element', class extends root.HTMLElement {
      connectedCallback() {
        this.innerHTML = this.nodeName + ' defined; location: ' + root.location;
        console.log(root)
      }
    })
  }

Элемент в основном DOM создается с помощью: defineElement()

важная часть: root.HTMLElement; каждая DOM должна ссылаться на свои собственные базовые классы.

Затем создается элемент во всплывающем окне со ссылкой на всплывающее окно: 

    const popup = window.open('', '_blank', 'width=200,height=100');
    popup.document.body.innerHTML = `<my-element>undefined in popup</my-element>`;
    defineElement(popup);

Код фрагмента StackOverflow не очень хорошо работает с window.open

Вот JSFiddle: https://jsfiddle.net/CustomElementsExamples/2jaqf15r/

Конечно, вы можете загрузить элементы из одного файла JS и ссылаться на него в каждое окно

Вещи, которые вы можете не сделать (еще?):

  • Запросить реестр для всех существующих элементов
    Если вы знаете имя отдельного элемента, которое вы можете использовать: CustomElementRegistry.get ()

  • copy / клонировать элементы в другой реестр

...