使用 document.getElementById 将 ShadowDom 中的特定元素公开给外部 JS答案

【问题标题】：Expose specific element in ShadowDom to external JS using document.getElementById使用 document.getElementById 将 ShadowDom 中的特定元素公开给外部 JS
【发布时间】：2018-04-14 04:09:15
【问题描述】：

我有一个 v0/Polymer 1 Web 组件，我正在升级到 v1/Polymer 2。这个 Web 组件动态构建一个加载外部 JavaScript 文件的 URI。外部 JavaScript 文件运行并将<iframe> 加载到我的组件的<div> 中。此外部 JS 包含 document.getElementById 以将 <iframe> 加载到指定的 <div> 中。

我已搜索并没有找到强制<div> 元素暴露/放置在shady DOM 中的方法。我已经读过，如果我设计没有 shadow DOM 的组件，则不会显示任何内容。

无论如何我可以使用外部脚本（第三方）将其更新为 Web 组件 v1/Polymer 2，但仍使用 document.getElementbyId 修改 Web 组件内的 <div>？

更新我发现我可以使用<script>window.ShadyDOM = { force: true };</script> 或<script src="/bower_components/webcomponentsjs/webcomponents-lite.js" shadydom></script> 强制webcomponents 使用shadow dom，但是我仍然无法通过ID 访问元素，我不想强制所有其他webcomponents 使用shady DOM。仍在寻找可能性。

【问题讨论】：

标签： web-component shadow-dom polymer-2.x shady-dom

【解决方案1】：

我必须在我的 Web 组件模板中添加一个 <slot></slot>。当我声明自定义元素时，我必须在其中嵌套一个<div>，如下所示：<custom-element><div></div></custom-element>，我正在使用this.appendChild()，其中this 是自定义元素。我元素中的<div> 现在可以通过document.getElementById() 访问，一旦它被分配了id 属性。

【讨论】：

这是一个很好的解决方案，但请注意，元素 in 并不是真正在 shadow dom 中，而是在 lite dom 中（然后 inserted 在 shadow dom 中，这要归功于 )
没错。我需要一个
元素，第三方 JS 可以在 Web 组件之外访问它，这就是我找到的。我没有在我之前的实现中使用并且只是（错误地）通过 ID 访问 shadyDOM，而你不能使用 shadowDom :)