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

Question

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

我已经搜索过，并且找不到强制<div>元素暴露/放置在阴暗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>强制web组件使用阴影dom但是我仍然无法通过ID访问该元素，我不想强​​制所有其他web组件使用阴影DOM。仍在寻找可能性。

Answer 1

我必须做的是在我的Web组件模板中放置一个<slot></slot>。当我声明自定义元素时，我必须在其中嵌套<div>，如下所示：<custom-element><div></div></custom-element>我正在使用this.appendChild()执行this，其中<div>是自定义元素。现在，我的元素中的document.getElementById()可以在id分配{{1}}属性后由{{1}}访问。