Выполнить скрипт внутри shadowRoot - PullRequest
Новая
       8

Выполнить скрипт внутри shadowRoot

0 голосов
/ 23 января 2019

Я пытаюсь использовать следующий код для выполнения скрипта из shadowRoot. 

const template = document.createElement('template');
template.innerHTML = `<script>console.log("hey");</script>`;
this.shadowRoot.appendChild(template.content);

Мне сказали, что создание template должно работать, но этот код не работает в Chrome v71.

1 Ответ

0 голосов
/ 30 марта 2019

Первое, что нужно помнить, это то, что shadowDOM инкапсулирует DOM и CSS, а не JavaScript.

Второе, что нужно знать, это то, что вы не можете ввести скрипт в DOM с помощью .innerHTML. Смотрите эту ссылку .Вместо этого класс, который определяет ваш компонент, заключается в том, как инкапсулировать ваш код JS.

Хотя вы не можете использовать .innerHTML, вы можете создать элемент сценария и установить его .textContent, а затем вызвать .appendChild() для этого. 

const script = document.createElement('script');
script.textContent = `alert("hey");`;

const el = document.querySelector('.testing');
el.attachShadow({mode:'open'});
el.shadowRoot.appendChild(script);
<div class="testing"></div>

Но, учитывая # 2, это, вероятно, не то, что вы действительно хотите сделать.

...