HTML 门户 - 无法在“HTMLPortalElement”上执行“激活”门户元素与门户上下文无关

Question

我正在尝试使用 Lit-Element 创建一个 HTMLPortalElement，但是当我准备激活（）门户时，我在 Web 开发控制台中收到此错误：

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://flags/#enable-portals 激活它后才能在 Chrome Canary 中使用。

在模板/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);