HTML Portal - не удалось выполнить «активировать» для «HTMLPortalElement». Элемент портала не связан с контекстом портала.

Question

Я пытаюсь создать HTMLPortalElement с Lit-Element, но когда я готов активировать () портал, я получаю эту ошибку в консоли Web Dev:

DOMException: не удалось выполнить «активации» для «HTMLPortalElement»: HTMLPortalElement не связан с контекстом портала.

class WikiPortal extends LitElement {
  static get properties() { return {
     _portalSrc: String
  }};

 constructor() {
   super();
   this._portalSrc = 'https://wicg.github.io/portals/';
 }

render() {  return html`
      <portal src="${this._portalSrc}" @click="${this._portalClickHandler}">
      </portal>`;
}

_portalClickHandler() {
   this.shadowRoot.querySelector('portal').activate();
}

Answer 1

Прежде чем ответить, я просто хочу упомянуть, что портал является экспериментальным элементом и доступен только в Chrome Canary после активации, посетив chrome: //flags/#enable-portals.

Кажется, есть проблема с созданием элемента портала в шаблоне / shadowDOM. Вот обходной путь, который работал для меня. В основном это программно создание элемента портала в основном DOM и добавление его в качестве дочернего элемента к пользовательскому элементу. Обратите внимание, что я добавил тестовую кнопку в компонент, чтобы я мог видеть что-то, чтобы щелкнуть.

import { LitElement, html, css } from 'lit-element';

class TestElement extends LitElement {
  constructor() {
    super();
    this._portalSrc = 'https://wicg.github.io/portals/';
  }

  render() {
    const template = html`<button type="button" @click="${this._portalClickHandler}">TEST</button>`; 
    return template;
  }
  _portalClickHandler() {
    var node = document.createElement("portal");
    node.src = this._portalSrc;
    document.querySelector('test-element').appendChild(node);
    console.log(document.querySelector('portal').src);
    document.querySelector('portal').activate();
 }

}

customElements.define('test-element', TestElement);