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

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

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

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


web-component shadow-dom
person Cheetah    schedule 22.01.2019    source источник
comment
См. ответ на Сценарий внутри теневого дома не работает   -  person Supersharp    schedule 23.01.2019
comment
@Supersharp - мой пример кода, который не работает, совпадает с решением 2 из этого ответа ... не так ли?   -  person Cheetah    schedule 23.01.2019
comment
Нет, вы используете innerHTML, в то время как в решении он получает элемент шаблона в DOM.   -  person Supersharp    schedule 23.01.2019
comment
@Supersharp прав. innerHTML останавливает выполнение скрипта. Это верно, даже если вы appendChild() содержимое. Однако я бы посоветовал, пока не нужно клонировать шаблон, это плохая практика - appendChild(template.content), а вместо этого appendChild(template.content.cloneNode()). Невыполнение этого требования может привести к большому количеству ошибок, хотя в этом конкретном примере кода это не требуется.   -  person Fuzzical Logic    schedule 02.02.2019

Ответы (1)


arrow_upward
0
arrow_downward

Первое, что нужно помнить, это то, что 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, это, вероятно, не то, что вы действительно хотите делать.

person Intervalia    schedule 30.03.2019