Executing JS in shadow DOM

Question

I am constructing a modular web app where various user-created models are to be handled. Shadow DOM is an obvious choice, but I don't understand how JS can be executed within shadow DOM.

I have an HTML content to be loaded with the following dummy scripts.

<h1>Nice header</h1>
<script type="text/javascript"> 
console.log('hello')
alert('hi');
</script>

I load the page with the previous scripts like this:

<div id="shadow-target"></div>
<div id="non-shadow-target"></div>

<script>
    // Called on btn click
    loadShadow = function(module) {
        var root = document.querySelector('#shadow-target').createShadowRoot();
        var lighttarget = document.querySelector('#non-shadow-target');     

        $.get('whatever.html', function (data) { 
            alert(data); 
            $(root).append(data);  // Nothing executed
            $(lighttarget).append(data); // Works fine
            // The header appears in both cases
        });
    }
</script>

As the comments say, the JS is not executed when the content is inserted into the shadow DOM root. The header appears in both cases but the scripts are executed only in light DOM. Why is that? How can custom JS be executed in the shadow DOM? (No cross domain stuff.)

The question is, what difference does it make, the shadow DOM is just a construct to create custom templates of HTML that can be inserted with tags etc. (a little more than that, but anyway), it's not a "different" DOM with a new thread and/or execution context, that would be a webworker. — adeneo, Jul 09 '14 at 09:02
Also note that there are known issues with getting HTML with script tags using ajax, and also with inserting script tags as strings into the DOM. — adeneo, Jul 09 '14 at 09:04
Since you're ok with shadow DOM, I think you should have a look at [custom elements](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/): shadow DOM and custom elements are parts of the web components project, so you should view them together. — MaxArt, Jul 09 '14 at 09:06
Thx, it's getting clearer, but I still don't get it why is the difference between the script executions. — Gábor Imre, Jul 09 '14 at 09:59

score 4 · Accepted Answer · edited May 23 '17 at 12:32

This jsfiddle verifies that script execution indeed works inside shadow dom when you are using plain JS. Therefore I don't see a difference between shadow and light dom in terms of script executions.

BUT, if I use jQuery it seems to be ignoring script tags when I append html to shadow root. Here is a jsfiddle for that as well. This seems to be a bug with jquery which repositions script tags, which combined with shadow dom messing up execution of scripts. Here is one of the few links which try to explain this behavior.

So instead of using

$(root).append(clone2);

Use

root.appendChild(clone2);

And script execution should work fine, even in shadow dom.

Executing JS in shadow DOM

1 Answers1