如何在影子dom / web组件中执行javascript？-Java 学习之路

我正在尝试使用模板/ html本身封装/引用的大多数javascript创建自定义元素 . 如何从模板/元素中生成javascript以在阴影dom中执行？以下是更好地理解该问题的示例 . 如何从 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 回答

几点：

浏览器不再允许您通过 innerHTML 添加脚本
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>

回复于 2024-04-29T15:56:50+08:00

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

1 回答

相关问题