polymer - 使用 document.getElementById 将 Web 组件元素从 ShadowDom 公开到外部 JS

Question

我正在使用 Polymer 提供的当前 PWA 入门套件模板。

https://github.com/Polymer/pwa-starter-kit/tree/template-typescript

我的 Web 组件元素页面返回以下带有 DIV 元素的代码:

return html`
      ${SharedStyles}    
      <section>
        ...my content...

      </section>
      <div id="CONTAINER NAME"></div>
    `

我需要通过 document.getElementById 从外部 javascript 访问 CONTAINER NAME 元素。我知道它位于 Shadow dom 中，但我无法更改外部 JS。所以问题是如何通过 document.getElementById 从 JS 访问它？

外部 JavaScript 将 iframe 加载到指定的 div 中。该外部组件需要通过 document.getElementById 获取 div 元素，以将 iframe 加载到指定的 div 中。

我已经搜索过，但没有找到一种方法来强制将 web 组件页面的影子 dom 中的 div 元素暴露/放置在 DOM 中。

我刚刚找到了这里提到的这个解决方案，但我没有让它在 PWA 模板中工作。也许因为 Shadow dom 在 PWA 模板中级联？

https://stackoverflow.com/a/47082470/9192527

有什么方法可以使用外部 javascript(第三方)更新基于 Polymer v3/PWA 套件的 Web 组件，仍然使用 document.getElementbyId 来修改 Web 组件内的 div？

所以寻找一种可能使用slots将shadow dom的元素暴露给light dom？但无法让它与上面链接的解决方案一起使用。

Answer 1

正如您所提到的，lit-element 默认使用 Shadow dom，因为它在制作可重用组件时具有很多优势。

但是，您可以选择退出它并使用“light”dom，这将在主 dom 中渲染组件的内容，从而使该内容可以使用 document.getElementById() 之类的内容进行访问。或document.querySelector()

以下是如何在基于 lit-element 的组件中使用 light dom 的最小示例(这里是 glitch，您可以在其中看到它的实际效果)

class MyElement extends LitElement {  
  render() {
    return html`
      <section>
        ... My content ...
      </section>
      <div id="myElementContainer">
        This is a container inside my element
      </div>
    `;
  }

  createRenderRoot() {
    // this is what overrides lit-element's behavior so that the contents don't render in shadow dom
    return this;
  }

}

请记住，在这种情况下，您应该只在应用程序中使用此组件一次，因为getElementById()有效，但您将无法使用 <slot>在你的组件中，因为这是一个仅适用于 Shadow dom 的功能