如何在 shadow dom 内运行 angular？

问题描述

如何在 shdow dom 中运行 angular 应用程序？

代码：

<script type="text/javascript">
    customElements.define('show-hello',class extends HTMLElement {
        connectedCallback() {
            const shadow = this.attachShadow({mode: 'closed'});
            shadow.innerHTML = `
                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
                <link rel="stylesheet" href="http://domain/styles.5b06983da863c73ff6ae.css">
                <app-root></app-root>
            `;

            var tag = document.createElement('script');
            tag.src = "http://domain/runtime.c5b03efbbe032268e2db.js";
            tag.defer = true;
            shadow.append(tag);

            tag = document.createElement('script');
            tag.src = "http://domain/polyfills-es5.1a4928232678b73b212e.js";
            tag.nomodule = true;
            tag.defer = true;
            shadow.append(tag);

            tag = document.createElement('script');
            tag.src = "http://domain/polyfills.5d56ab2a8a4492384195.js";
            tag.defer = true;
            shadow.append(tag)

            tag = document.createElement('script');
            tag.src = "http://domain/scripts.cb9c1c75fdd88cce0ad3.js";
            tag.defer = true;
            shadow.append(tag)

            tag = document.createElement('script');
            tag.src = "http://domain/main.8120316e488535e5c9fe.js";
            tag.defer = true;
            shadow.append(tag)

            console.log(shadow.innerHTML);
        }
    });
</script>
<show-hello></show-hello>

错误：

ERROR Error: The selector "app-root" did not match any elements
    at t.selectRootElement (main.8120316e488535e5c9fe.js:1)
    at t.selectRootElement (main.8120316e488535e5c9fe.js:1)
    at main.8120316e488535e5c9fe.js:1
    at e.create (main.8120316e488535e5c9fe.js:1)
    at t.bootstrap (main.8120316e488535e5c9fe.js:1)
    at main.8120316e488535e5c9fe.js:1
    at Array.forEach (<anonymous>)
    at t._moduleDoBootstrap (main.8120316e488535e5c9fe.js:1)
    at main.8120316e488535e5c9fe.js:1
    at e.invoke (polyfills.5d56ab2a8a4492384195.js:1)

如果这是不可能的，也许有其他方法可以将应用程序嵌入到站点中，使应用程序样式不与站点样式混合？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular shadow-dom