1

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

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

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

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

4

1 回答 1

4

我要做的就是<slot></slot>在我的 Web Components 模板中添加一个。当我声明自定义元素时，我必须<div>像这样在<custom-element><div></div></custom-element>其中嵌套一个：我正在使用this.appendChild()哪里this是自定义元素。一旦为其分配了属性<div>，现在就可以访问我的元素内部。document.getElementById()id

于 2017-11-02T18:42:54.837 回答