阴影内的脚本不起作用

我创建并导出了一个Angular Element(Angular中的Web组件)作为单个脚本标记(user-poll.js) . 要使用此Angular元素,我只需在主机站点中指定以下两行:

<user-poll></user-poll>
 <script src="path/to/user-poll.js"></script>

Working JSBin Example

我有以下要求:

  • 在外部站点上加载多个Angular Elements .

  • 动态加载所有角度元素

我有以下问题:

  • 在站点上加载多个组件会产生角色冲突,因为每个组件脚本本身都是一个完整的Angular应用程序 .

  • 为了解决冲突问题,我将每个组件加载到一个单独的 Shadow Dom 组件中(即在shadow dom容器中添加组件标记和组件脚本文件链接),以便每个组件都被沙箱化 . 但是阴影内的组件脚本无法正常工作 .

JSBin example阴影dom内的动态加载组件

<body>

</body>
    setTimeout(() => {
    loadJS();
}, 2000);
function loadJS() {
    var elm = document.createElement("div");
    elm.attachShadow({mode: "open"});
    elm.shadowRoot.innerHTML = `<user-poll><h2>Custom Web Component - user-poll loaded</h2><script src="https://cdn.rawgit.com/SaurabhLpRocks/795f67f8dc9652e5f119bd6060b58265/raw/d5490627b623f09c84cfecbd3d2bb8e09c743ed4/user-poll.js"><\/\script></user-poll>`;
    document.body.appendChild(elm);
}

那么,在网站上动态加载多个Angular Elements的最佳方法是什么?

回答(1)

2 years ago

脚本未执行的事实与Shadow DOM无关,而是与您尝试插入 <script> 元素的方式有关,即通过 innerHTML 中的字符串 . 在这种情况下,不解释字符串并且不执行脚本 .

如果您希望它工作,您必须通过 appendChild() 插入 <script> .

您可以通过添加使用 createElement() 创建的 <script> 元素或使用 <template> 元素直接执行此操作 .

1. with createElement()

创建一个 <script> 元素并将其附加到其父元素:

var up = document.createElement( 'user-poll' )
var script = document.createElement( 'script' )
script.textContent = 'document.write( "executed" )'
up.appendChild( script )
elm.attachShadow( { mode: 'open' } )
   .appendChild( up )
<div id="elm"></div>

2. with a <template> tag

附加 <template> 元素的内容:

elm.attachShadow( { mode: 'open' } )
   .appendChild( tpl.content )
<template id="tpl">
    <user-poll>
        <script>document.write( 'exected' )</script>
    </user-poll>
</template>

<div id="elm"></div>

解析 <template> 元素时,不执行该脚本,但将其 content 附加到DOM时 .

PS :无论如何我'm not sure it'是加载多个Angular元素的最佳方式:Shadow DOM不会像J4代码那样充当沙盒,就像 <iframe> 一样 . 相反,也许你必须使用模块加载器 .