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

admin管理员组

文章数量:1403066

Say I have a few js-files stored externally, or I just want to load a new dependency like JQuery or Angular in my shadow-root, is there a way to load it into it?

I know for css-stylesheets you can just do:

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

is there a similar way to do that with js? Since just doing this:

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

doesn't work :/

Also I am doing this:

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

DOM.getElementsByTagName('head')[0].appendChild(script); 

the "parseFromString(html.responseText,'text/html')" is because I am getting my html from an external source as well.

Here is a plunkr

Say I have a few js-files stored externally, or I just want to load a new dependency like JQuery or Angular in my shadow-root, is there a way to load it into it?

I know for css-stylesheets you can just do:

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

is there a similar way to do that with js? Since just doing this:

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

doesn't work :/

Also I am doing this:

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

DOM.getElementsByTagName('head')[0].appendChild(script); 

the "parseFromString(html.responseText,'text/html')" is because I am getting my html from an external source as well.

Here is a plunkr http://plnkr.co/edit/YM1lXN8QEhjMd4n9u0wf?p=preview

• javascript
• external
• shadow-dom

Share Improve this question Follow edited Dec 14, 2014 at 23:42 asosnovsky asked Dec 14, 2014 at 17:52 asosnovskyasosnovsky 2,23533 gold badges2525 silver badges4242 bronze badges 5

• 2 The code works (apart from a typo at the end of the first line). When you want to execute the script, you've to append it to body or head, though. For this you've to keep a reference to the script alive. – Teemu Commented Dec 14, 2014 at 18:21
• Sorry I don't really understand what to do... I thought I did append, by doing .appendChild(script) – asosnovsky Commented Dec 14, 2014 at 18:56
• Ah not on the real page, I just wrote something random here. – asosnovsky Commented Dec 14, 2014 at 19:04
• @Teemu I added a plunkr to show what I have – asosnovsky Commented Dec 14, 2014 at 23:44
• Hmmm... AJAX is an abbreviation of Asynchronous Javascript And Xml. – Teemu Commented Dec 15, 2014 at 13:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

As you figured out, Shadow DOM does not create a new scope for JavaScript, it's only concerned with DOM and CSS scoping.

There are a couple approaches to adding JavaScript to the document. The first is the classic script injection:

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

You were doing this in your previous example but you were appending the script to the wrong place. Just add it to the main document instead of the html that you loaded. I think it should work in either instance, but it makes more sense for it to follow the typical pattern of appending to the main document's head.

The other approach, if you're using HTML Imports, is to include a link tag, which has a script that points to your resource. This is often what we do with Polymer elements. We link all of our dependencies at the top, that way they get loaded before our element definition is registered.

So I kinda figured this out, I didn't understand what a #shadow-root is. Its not like an iFrame where it gets its own #document and has a pletely different environment to the rest of the site. You can load js into a shadow-root by calling its parent element and then its elements, So say this is my structure:

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

then in order to work some magic on the '#content' tag, using jquery you can change it by doing this:

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

Even if this code is ran from inside the shadow-root

本文标签： shadowroot is there a way to include an external javascript file into a shadowrootStack Overflow