首页 文章

使用document.getElementById将ShadowDom中的特定元素暴露给外部JS

提问于
浏览
1

我有一个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> 吗?

UPDATE 我发现我可以强制webcomponents使用 <script>window.ShadyDOM = { force: true };</script><script src="/bower_components/webcomponentsjs/webcomponents-lite.js" shadydom></script> 使用阴影dom但是我仍然无法通过ID访问该元素,我不想强迫所有其他web组件使用阴影DOM . 仍在寻找可能性 .

1 回答

  • 3

    我必须做的是在我的Web Components模板中放置一个 <slot></slot> . 当我声明自定义元素时,我必须在其中嵌套 <div> ,如下所示: <custom-element><div></div></custom-element> 我正在使用 this.appendChild() ,其中 this 是自定义元素 . 一旦为 document.getElementById() 分配了 id 属性,我的元素中的 <div> 现在可以被 document.getElementById() 访问 .

相关问题