Как выполнить JavaScript в теневых доменах / веб-компонентах? - PullRequest
Новая
       21

Как выполнить JavaScript в теневых доменах / веб-компонентах?

0 голосов
/ 10 декабря 2018

Я пытаюсь создать пользовательский элемент с большей частью javascript, инкапсулированной / указанной в самом шаблоне / html.Как я могу сделать этот javascript из шаблона / элемента для выполнения в теневой дом?Ниже приведен пример, чтобы лучше понять проблему.Как я могу сделать сценарий из template.innerHTML (<script>alert("hello"); console.log("hello from tpl");</script>) для выполнения?

В настоящее время я не получаю оповещений или входов в консоль.Я тестирую это с Chrome.

class ViewMedia extends HTMLElement {
   constructor() {
      super();
      const shadow = this.attachShadow({mode: 'closed'});
     var template = document.createElement( 'template' );
     template.innerHTML = '<script>alert("hello"); console.log("hello from tpl");</script>';
     shadow.appendChild( document.importNode( template.content, true ) ); 
    }
}

customElements.define('x-view-media', ViewMedia);

1 Ответ

0 голосов
/ 10 декабря 2018

Несколько моментов:

  1. Браузеры больше не позволяют добавлять скрипт через innerHTML
  2. В DOM веб-компоненте, подобном там, нет песочницы скриптанаходится в iFrame.

Вы можете создавать блоки скриптов, используя var el = document.createElement('script');, а затем добавлять их как дочерние элементы. 

class ViewMedia extends HTMLElement {
   constructor() {
      super();
      const shadow = this.attachShadow({mode: 'closed'});
      const s = document.createElement('script');
      s.textContent = 'alert("hello");';
      shadow.appendChild(s);
    }
}

customElements.define('x-view-media', ViewMedia);
<x-view-media></x-view-media>
...