shadow-root:有没有办法将外部JavaScript文件包含在shadow-root中

shadow-root: is there a way to include an external javascript file into a shadow-root?

本文关键字：shadow-root 文件包 JavaScript 有没有 外部      更新时间：2023-09-26

假设我在外部存储了一些js文件，或者我只想在我的影子根中加载一个新的依赖项，如JQuery或Angular，有没有办法将其加载到其中？

我知道对于css样式表，你可以这样做：

var style = document.createElement('style');
    style.setAttribute('type','text/css');
    style.innerText = '@import "' + csspath + '";';

有没有类似的方法可以用JS做到这一点？既然只是这样做：

var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = jspath;

不起作用：/

我也在这样做：

var root = document.getElementById('container').createShadowRoot(); 
var DOM = new DOMParser().parseFromString(html.responseText,'text/html').getElementsByTagName('html')[0];
DOM.getElementsByTagName('head')[0].appendChild(script);

"parseFromString（html.responseText，'text/html'）"是因为我也从外部源获取我的html。

这是一个 plunkrhttp://plnkr.co/edit/YM1lXN8QEhjMd4n9u0wf?p=preview

正如你所发现的，Shadow DOM 并没有为 JavaScript 创建一个新的作用域，它只关注 DOM 和 CSS 作用域。

有几种方法可以将 JavaScript 添加到文档中。首先是经典的脚本注入：

<script>
    var script = document.createElement('script');
    script.src = "//somehost.com/awesome-widget.js";
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

您在前面的示例中执行此操作，但将脚本附加到错误的位置。只需将其添加到主document而不是您加载的html即可。我认为它应该在任何一种情况下都有效，但是遵循附加到主文档head的典型模式更有意义。

如果使用 HTML 导入，另一种方法是包含一个 link 标记，该标记具有指向资源的script。这通常是我们对聚合物元件所做的。我们在顶部链接所有依赖项，这样它们就会在我们的元素定义注册之前加载。

所以我有点想通了，我不明白什么是 #shadow 根。它不像iFrame，它有自己的 #document，并且与网站的其他部分具有完全不同的环境。您可以通过调用其父元素，然后调用其元素将 js 加载到影子根中，所以说这是我的结构：

div [id='app']
|   #shadow-root
|   |   div [id='content']

然后为了在"#content"标签上发挥一些魔力，使用 jQuery 你可以通过这样做来改变它：

$('#app').find('#content').html('hello world')

即使此代码是从影子根内部运行的

相关文章：