如何在 Shadow dom 内运行 Angular？

Question

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

Run Code Online (Sandbox Code Playgroud)

错误：

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)

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Dan*_*ban 5

解决方案

<!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>

Run Code Online (Sandbox Code Playgroud)

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

<!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>

Run Code Online (Sandbox Code Playgroud)

此链接也可能有帮助。

归档时间：	4 年，10 月前
查看次数：	1566 次
最近记录：	3 年前