Предоставьте конкретный элемент в ShadowDom для внешнего JS, используя document.getElementById

Question

У меня есть веб-компонент v0/Polymer 1, который я обновляю до v1/Polymer 2. Этот веб-компонент динамически создает URI, который загружает внешний файл JavaScript. Внешний файл JavaScript запускается и загружает <iframe> в <div> моего компонента. Этот внешний JS содержит document.getElementById загрузить <iframe> в указанный <div>,

Я искал и не нашел способ заставить <div> элемент, который будет выставлен / помещен в теневой DOM. Я прочитал, что если я создаю компонент без теневого DOM, ничего не будет отображаться.

В любом случае я могу обновить это до веб-компонентов v1 / Polymer 2 с помощью внешнего скрипта (стороннего производителя), все еще использующего document.getElementbyId изменить <div> внутри веб-компонента?

ОБНОВЛЕНИЕ Я обнаружил, что могу заставить веб-компоненты использовать теневой домен, используя <script>window.ShadyDOM = { force: true };</script> или же <script src="/bower_components/webcomponentsjs/webcomponents-lite.js" shadydom></script> однако я все еще не могу получить доступ к элементу по идентификатору и не хочу заставлять все остальные веб-компоненты использовать теневую модель DOM. Все еще ищу возможности.

Answer 1

Что мне нужно было сделать, это поставить <slot></slot> внутри моего шаблона веб-компонентов. Когда я объявляю пользовательский элемент, я должен вложить <div> внутри это так: <custom-element><div></div></custom-element> который я делаю, используя this.appendChild() где this это пользовательский элемент. <div> внутри моего элемента теперь можно получить доступ document.getElementById() как только он назначен id приписывать.