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

Question

假设我有一些外部存储的 js 文件，或者我只想在我的 shadow-root 中加载一个新的依赖项，如 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。

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

Answer 1

如您所知，Shadow DOM 不会为 JavaScript 创建新的作用域，它只关心 DOM 和 CSS 作用域。

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

<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。这通常是我们对 Polymer 元素所做的。 We link all of our dependencies at the top , 这样它们就会在我们的元素定义被注册之前加载。