如何在 shadow dom 内运行 angular？答案

【问题标题】：how run angular inside shadow dom?如何在 shadow dom 内运行 angular？
【发布时间】：2021-04-17 21:30:21
【问题描述】：

如何在 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)

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

【问题讨论】：

我不确定你的代码是做什么用的，但这似乎根本不需要……？你看过 viewEncapsulation 吗？
你想构建网络组件吗？
@MikeOne viewEncapsulation 不合适，因为它不封装 angular.json 中包含的全局连接样式，例如引导程序
@DaniilLoban 我想在不使用 iframe 的情况下将现有的 spa 应用程序连接到另一个站点，也许它是一个 Web 组件，但我不确定。
@Raidkon，他们需要互动吗？

标签： angular shadow-dom

【解决方案1】：

解决方案

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8"/>
      <base href="/"> <!-- Important for Angular App  -->
      <!-- There are react app links etc.  --> 
   </head>
   <body>
      <!-- I just split view for two Apps -->
      <div style="display: flex; flex-direction: row;">
         <div style="width: 50vw;" id="root"></div> <!-- It's for React App  -->
         <app-root style="width: 50vw;"> <!-- This should be plased in real DOM  --> 
            <first-app></first-app> <!-- We also need put a shadow component here -->
         </app-root>
      </div>

      </div><script>
         // There is react app code form index.html
      </script>

      <script type="text/javascript">
         // This is our script for Angular app
         // Notice that the distribution is in the folder: dist/my-app/  
         customElements.define('first-app', class extends HTMLElement {
           connectedCallback() {
             const shadow = this.attachShadow({mode: 'open'});
             const scripts = ['runtime.js', 'polyfills.js', 'vendor.js', 'main.js'];
               scripts.forEach(name => {
                 const tag = document.createElement('script');
                 tag.src = 'dist/my-app/' + name;
                 tag.nomodule = true;
                 tag.defer = true;
                 shadow.append(tag);
               })
           }});
      </script>   
   </body>
</html>

这是一个关于在阴影组件中保留自己的样式的示例。

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">  
   <title></title>
 </head>
 <body>

<script>
  customElements.define('show-hello', class extends HTMLElement {
    connectedCallback() {
      const shadow = this.attachShadow({mode: 'open'});
      const styles = `
        <style>
          p{color: blue;}
        </style>
      `
      shadow.innerHTML = `
      ${styles}      
      <p>
        Hello, ${this.getAttribute('name')}
      </p>`;
    }
  });
</script>

<p>It is not in shadow</p>
<show-hello name="from shadow"></show-hello>

</body>
</html>

这个link 也可能有帮助。

【讨论】：