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

我正在尝试创建一个自定义元素，其中大部分javascript被封装/引用在模板/html本身中。如何从要在影子dom中执行的模板/元素生成javascript？下面是一个更好地理解该问题的示例。如何从template.innerHTML alerthello生成脚本；来自tpl的console.loghello；执行

目前，我没有收到任何警报或登录到控制台。我正在用Chrome测试这个

类ViewMedia扩展了HtmleElement{ 建造师{ 超级的 const shadow=this.attachShadow{mode:'closed'}； var template=document.createElement“template”； template.innerHTML='alerthello；console.loghello from tpl'； shadow.appendChild document.importNode template.content，true； } } 自定义元素。定义“x-view-media”，ViewMedia； 有几点：

浏览器不再允许您通过innerHTML添加脚本 DOM中没有像iFrame中那样的web组件中的脚本沙盒。 您可以使用var el=document.createElement'script'创建脚本块；然后将它们作为子元素添加

类ViewMedia扩展了HtmleElement{ 建造师{ 超级的 const shadow=this.attachShadow{mode:'closed'}； const s=document.createElement'script'； s、 textContent='alerthello；'； 影子儿童； } } 自定义元素。定义“x-view-media”，ViewMedia；

---

有些库不是设计为Web组件类的一部分，即我使用的是空间导航库。从html模板/文档而不是web组件类加载脚本也会使我的代码更易于管理，并且不太正式。我将尝试基于createElement创建一个“脚本加载器”，看看它是否有效。沙盒级别对我来说已经足够好了，即document.querySelector只从shadow dom中选择元素。您能在页面上加载库并从Web组件使用它吗？不，它不起作用。我已经试过了。另外，我希望web组件更加封装EDI.e。将其依赖项放在web组件本身中，而不是在父组件中加载所有类型的依赖项。您甚至可能不需要web组件。为什么不使用一小块脚本来生成所有需要的标记以嵌入所需的所有内容呢。或者将所有内容转换为相互依赖的ES6模块。是的，你可以在组件中加载JS，但是除非你需要一个组件，否则它只是开销，并且不兼容旧的浏览器，除非你包含polyfills。当然我需要一个组件…否则我应该如何获得CSS隔离？事实上你的示例是有效的。可能重复