3

我正在使用 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将 iframe 加载到指定的 div 中来获取 div 元素。

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

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

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

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

所以寻找一种可能性，使用可能slots将阴影 dom 的元素暴露给 light dom？但不能让它与上面链接的解决方案一起工作。

4

2 回答 2

3

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

但是，您可以选择退出它并使用“轻”dom，它将在主 dom 中呈现组件的内容，从而使该内容可以使用类似document.getElementById()或document.querySelector()

这是一个关于如何在基于 lit-element 的组件中使用 light dom 的最小示例（这里有一个小故障，您可以在其中看到它的运行情况）

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 的功能

于 2018-11-07T18:33:16.870 回答
1

所以寻找一种可能性，使用槽将阴影 dom 的元素暴露给 light dom？但不能让它与上面链接的解决方案一起工作。

实际上你应该做的恰恰相反：<div>在 light DOM 中暴露要选择的对象，<slot>如果需要，通过标签将其集成到 Shadow DOM 中。

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

      </section>
      <slot></slot>
    `
于 2018-11-07T19:59:12.720 回答