阴影dom内部的脚本不起作用

Question

阴影dom内部的脚本不起作用

Sau*_*kar 0 javascript web-component shadow-dom angular angular-elements

我已经创建并导出了一个Angular Element（Angular中的Web组件）作为单个脚本标签（user-poll.js）。要使用此Angular元素，我只需要在宿主站点中指定以下两行：

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

Run Code Online (Sandbox Code Playgroud)

工作JSBin示例

我有以下要求：

在外部站点上加载多个Angular Elements。
动态加载所有角度元素

我有以下问题：

在站点上加载多个组件会导致Angular冲突，因为每个组件脚本本身就是一个完整的Angular应用。
为了解决冲突问题，我将每个组件加载到单独的Shadow Dom组件中（即，在shadow dom容器内添加组件标签和组件脚本文件链接），以便对每个组件进行沙盒处理。但是影子dom内部的组件脚本不起作用。

JSBin影子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);
}

Run Code Online (Sandbox Code Playgroud)

那么，在站点上动态加载多个Angular Elements的最佳方法是什么？

Answer 1

Sup*_*arp 6

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

如果您希望它起作用，则必须插入<script>via appendChild()。

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

1.使用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 )

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

2.带<template>标签

附加<template>元素的内容：

elm.attachShadow( { mode: 'open' } )
   .appendChild( tpl.content )

Run Code Online (Sandbox Code Playgroud)

<template id="tpl">
    <user-poll>
        <script>document.write( 'exected' )</script>
    </user-poll>
</template>

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

Run Code Online (Sandbox Code Playgroud)

<template>解析元素时不执行脚本，而是将元素content附加到DOM时执行。

PS：无论如何，我不确定这是加载多个Angular元素的最佳方法：Shadow DOM不会像Javascript代码那样充当沙箱<iframe>。相反，也许您必须使用模块加载器。

归档时间：	7 年，4 月前
查看次数：	2106 次
最近记录：	7 年，4 月前