Is there a way to use scripts in the Shadow DOM with a strict content security policy?

Question

Part of the new Web Components specification - a Shadow DOM - way of investing resources <style>and <script>with the very component of HTML.

As I understand it, the Shadow DOM specification imitates how many existing controls already exist in most browsers - for example, the browser’s own video player will have internal buttons that are part of the DOM control.

However, this seems to contradict the content security policy, which disables evalembedded scripts as well.

A simple example (which only works in browsers that support <template>and createShadowRoot()):

// Create the shadow DOM
var shadow = document.querySelector('#testOutput').createShadowRoot();

// Get the template fragment and add it to the shadow DOM
shadow.appendChild(document.querySelector('#testTemplate').content);

<template id="testTemplate">
    <style>
        .foo { color: #e00; }
    </style>
    <script>
         alert('Hello from the component');
    </script>
    <div class="foo">bar</div>
</template>

<div id="testOutput">shadow</div>

Run codeHide result

Run this and you will get the red text "bar" and a warning.

CSP, , :

Content-Security-Policy:default-src 'self'; object-src 'none'; img-src 'self' data:;

.

, CSP - , , CSP ( , IE11), - - . - - , JS/CSS.

• ?

• Shadow DOM CSP?

• Shadow DOM, , CSP?

• Shadow DOM, ?

2017

Shadow DOM, <script>. , HTML, (, ).