代码之家 › 专栏 › 技术社区 › Saurabh Palatkar

阴影dom内的脚本不工作

angular-elements shadow-dom web-component angular javascript

0

Saurabh Palatkar · 技术社区 · 7 年前

我创建并导出了一个Angular元素(Angular中的web组件)作为单个脚本标记(user)-投票.js). 要使用这个角度元素,我只需要在宿主站点中指定以下两行:

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

Working JSBin Example

我有以下要求:

动态加载所有角度元素

我有以下问题:

在一个站点上加载多个组件会产生角度冲突,因为每个组件脚本本身就是一个完整的角度应用程序。
为了解决冲突问题,我将每个组件加载到一个单独的 阴影Dom

JSBin example 在shadow 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);
}

那么,在一个站点上动态加载多个角度元素的最佳方法是什么?

1 回复 | 直到 7 年前