使用 document.getElementById 将 ShadowDom 中的特定元素暴露给外部 JS
Expose specific element in ShadowDom to external JS using document.getElementById
我有一个 v0/Polymer 1 Web 组件，我正在升级到 v1/Polymer 2。此 Web 组件动态构建一个加载外部 JavaScript 文件的 URI。外部 JavaScript 文件运行并将 <iframe> 加载到我的组件的 <div> 中。此外部 JS 包含 document.getElementById 以将 <iframe> 加载到指定的 <div> 中。
我已经搜索过，但没有找到在 shady DOM 中强制 <div> 元素为 exposed/placed 的方法。我读过如果我设计的组件没有 shadow DOM 什么都不会显示。
我是否可以通过外部脚本（第三方）将其更新为 Web 组件 v1/Polymer2 仍然使用 document.getElementbyId 修改 Web 组件内的 <div>？
更新
我发现我可以强制 webcomponents 使用阴影 dom 使用 <script>window.ShadyDOM = { force: true };</script> 或 <script src="/bower_components/webcomponentsjs/webcomponents-lite.js" shadydom></script> 但是我仍然无法通过 ID 访问该元素并且我不想强制所有其他 webcomponents 使用阴暗的 DOM。仍在寻找可能性。
我必须做的是在我的 Web 组件模板中放置一个 <slot></slot>。当我声明自定义元素时，我必须像这样在其中嵌套一个 <div>： <custom-element><div></div></custom-element> 我正在使用 this.appendChild()，其中 this 是自定义元素。我的元素中的 <div> 现在可以被 document.getElementById() 访问，一旦它被分配了 id 属性。
我有一个 v0/Polymer 1 Web 组件，我正在升级到 v1/Polymer 2。此 Web 组件动态构建一个加载外部 JavaScript 文件的 URI。外部 JavaScript 文件运行并将 <iframe> 加载到我的组件的 <div> 中。此外部 JS 包含 document.getElementById 以将 <iframe> 加载到指定的 <div> 中。
我已经搜索过，但没有找到在 shady DOM 中强制 <div> 元素为 exposed/placed 的方法。我读过如果我设计的组件没有 shadow DOM 什么都不会显示。
我是否可以通过外部脚本（第三方）将其更新为 Web 组件 v1/Polymer2 仍然使用 document.getElementbyId 修改 Web 组件内的 <div>？
更新
我发现我可以强制 webcomponents 使用阴影 dom 使用 <script>window.ShadyDOM = { force: true };</script> 或 <script src="/bower_components/webcomponentsjs/webcomponents-lite.js" shadydom></script> 但是我仍然无法通过 ID 访问该元素并且我不想强制所有其他 webcomponents 使用阴暗的 DOM。仍在寻找可能性。
我必须做的是在我的 Web 组件模板中放置一个 <slot></slot>。当我声明自定义元素时，我必须像这样在其中嵌套一个 <div>： <custom-element><div></div></custom-element> 我正在使用 this.appendChild()，其中 this 是自定义元素。我的元素中的 <div> 现在可以被 document.getElementById() 访问，一旦它被分配了 id 属性。