如何在影子 dom/web 组件中执行 javascript？

Question

我正在尝试创建一个自定义元素，其中大部分 javascript 封装/引用在模板/html 本身中。如何从要在影子 dom 中执行的模板/元素中制作 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")';
    shadow.appendChild( document.importNode( template.content, true ) ); 
  }
}

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

<x-view-media />

Answer 1

几点：

1. 浏览器不再允许您通过innerHTML 添加脚本
2. 在 DOM 中没有像 iFrame 中那样的 Web 组件的脚本沙盒。

您可以使用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>