覆盖 createRenderRoot 后如何访问 lit-element 渲染根？

Question

我一直在玩 lit-element，我想将我的自定义元素获取到运行 getElementById。我能找到的唯一示例使用影子根（因为这是使用 lit-element 的推荐方式）。如何访问您的自定义元素以运行仅针对您的元素进行查询？

import { LitElement, html } 
from 'https://unpkg.com/lit-element/lit-element.js?module';

class RenderRootTest extends LitElement {
  constructor() {
    super();
  }
  render () {
    const renderRoot = this.shadowRoot; //Won't work, because I'm overriding the shadowroot
    return html`
      <div>Rendered</div>
      ${renderRoot ? 
        html`<div>Render root found</div>` :
        html``
      }
    `;
  }
  createRenderRoot() {
    return this;
  }
}

customElements.define('render-root-test', RenderRootTest);

Answer 1

经过足够的修补，我自己找到了答案。您可以使用 this.renderRoot 或仅使用 this。但是，请注意某些方法，例如 .getElementById 似乎并不存在。如果有人对此主题有任何其他详细信息，我将不胜感激。

例如

import { LitElement, html } 
from 'https://unpkg.com/lit-element/lit-element.js?module';

class RenderRootTest extends LitElement {
  constructor() {
    super();
  }
  render () {
    const renderRoot = this.renderRoot;
    return html`
      <div>Rendered</div>
      ${renderRoot ? 
        html`<div>Render root found</div>` :
        html``
      }
    `;
  }
  createRenderRoot() {
    return this;
  }
}

customElements.define('render-root-test', RenderRootTest);

Answer 2

只需引用 this 即可，这是自定义元素的实例。 shadowRoot 由 LitElement 的 createRenderRoot() 创建并 return 编辑，因此如果您不创建一个而不是 this.shadowRoot return this--这是节点本身——这是内容被渲染到的地方，没有 shadowRoot。

覆盖 createRenderRoot 后如何访问 lit-element 渲染根？

How do you access a lit-element render root after overriding createRenderRoot?

lit-element