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访问“容器名称”元素。我知道它位于影子dom中，但是我不能更改外部JS。那么问题是如何使它可以通过document.getElementById从JS进行访问？

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

我已经搜索并没有找到一种方法来强制将我的Web组件页面的影子dom中的div元素公开/放置在DOM中。

我刚刚找到这里提到的解决方案，但是我没有在PWA模板中使用它。也许是因为阴影域已级联在PWA模板中？

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

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

因此，寻找一种可能使用slots来将影子dom的元素暴露于光线dom的可能性吗？但是无法使其与上面链接的解决方案一起使用。

Answer 1

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

但是，您可以选择退出并使用“ light” dom，它会在主dom中呈现组件的内容，这反过来将使内容可以使用document.getElementById()或document.querySelector()之类的内容进行访问< / p>

这是一个如何在基于照明元素的组件中使用光顶的最小示例（这里是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>，因为仅适用于影子dom的功能

Answer 2

因此，寻找使用狭缝将阴影dom的元素暴露于光dom的可能性吗？但是无法使其与上面链接的解决方案一起使用。

实际上，您应该做的相反：暴露<div>以在轻型DOM中选择，并根据需要通过<slot>标签将其集成到Shadow DOM中。

this.innerHTML = '<div id="CONTAINER NAME"></div>'
return html`
      ${SharedStyles}    
      <section>
        ...my content...

      </section>
      <slot></slot>
    `

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

2 个答案: