javascript - Executing JS in shadow DOM - Stack Overflow

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 ments 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.)

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 ments 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.)

• javascript
• shadow-dom

Share Improve this question Follow asked Jul 9, 2014 at 8:55 Gábor ImreGábor Imre 6,32933 gold badges3939 silver badges5050 bronze badges 4

• 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 Commented Jul 9, 2014 at 9: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 Commented Jul 9, 2014 at 9:04
• 1 Since you're ok with shadow DOM, I think you should have a look at custom elements: shadow DOM and custom elements are parts of the web ponents project, so you should view them together. – MaxArt Commented Jul 9, 2014 at 9:06
• Thx, it's getting clearer, but I still don't get it why is the difference between the script executions. – Gábor Imre Commented Jul 9, 2014 at 9:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 bined 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.