Question

假设我有一些外部存储的js文件，或者我只是想在我的shadow-root中加载一个新的依赖项，比如JQuery或Angular，有没有办法将它加载到它？

我知道你可以做的css-stylesheets：

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);

＆＃34; parseFromString（html.responseText，＆＃39; text / html＆＃39;）＆＃34;是因为我也从外部来源获取我的HTML。

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

Answer 1

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

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

然后为了对#con;＃content＆＃39;使用jquery，您可以通过以下方式更改它：

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

即使此代码是从影子根

中运行的

Answer 2

正如您所知，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 Imports，则另一种方法是添加link标记，该标记的script指向您的资源。这通常是我们对Polymer元素的处理。 We link all of our dependencies at the top，这样就可以在注册元素定义之前加载它们。

shadow-root：有没有办法将外部javascript文件包含在shadow-root中？

2 个答案: