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