Почему вы храните КОД в shadowDOM? Код не изолирован как HTML и CSS внутри shadowDOM. Он по-прежнему работает на глобальном уровне. Это отличается от того, как работает <iframe>
.
Если вы собираетесь перейти на этот уровень попытки разделения кода, просто используйте настоящий WebComponent и делайте все в этом классе.
Если вы по-прежнему нужно продолжать делать это так, как вы это делаете, тогда вам нужно иметь способ передать variable
(переменную shadow Root) в код, который вы помещаете в shadowDOM.
ОБНОВЛЕНИЕ - 3 августа 2020 г.
Если другому коду требуется доступ к закрытой теневой DOM, тогда код, создавший shadowRoot
, должен сохранить shadowRoot
в качестве переменной, а затем передать это переменная к другим функциям. Или вам нужно создать закрытую область в пределах JavaScript и сохранить shadowRoot
в этой области. Если все другие функции находятся в этой области, они будут иметь доступ к переменной, которая указывает на shadowRoot
.
Ниже приведен пример кода, который показывает, как создать область.
const publicInterface = (function() {
var shadowRoot;
function createShadowDom() {
shadowRoot = ...
}
function doSomethingElse() {
let a = shadowRoot.querySelector('.something');
if (a) {
}
}
return {
createShadowDom,
doSomethingElse
}
})();
publicInterface.createShadowDom();
publicInterface.doSomethingElse();
Переменная shadowRoot
защищена внутри области и не может быть доступна для внешнего кода. Но любая функция внутри области видимости, например createShadowDom
и doSomethingElse
, может получить доступ к shadowRoot
.