CODEWITHSUNDEEP
angularshadow-dom
Raidkon
Raidkon

Reputation: 41

how run angular inside shadow dom?

How run angular application inside shdow dom?

code:

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

If this is not possible, maybe there is some other way to embed the application into the site so that the application styles do not mix with the site styles?

Upvotes: 4

Views: 2139

Answers (2)

Max
Max

Reputation: 69

Angular cannot find "app-selector" when it is capsulated in a shadow dom.

Since document.querySelector("app-root") simply returns null you need to help Angular find that element. Luckily you can do this if you implement ngDoBootstrap.

Remove bootstrap: [AppComponent] from your main ngModule and implement this function in the module class to bootstrap manually:

export class AppModule implements DoBootstrap {
   ngDoBootstrap(appRef: ApplicationRef) {
      const element = document.querySelector("show-hello").shadowRoot.querySelector("app-root");
      appRef.bootstrap(AppComponent, element);
   }
}

Upvotes: 2

Daniil Loban
Daniil Loban

Reputation: 4381

The solution enter image description here

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

This is a example about a keeping own styles in shadow component.

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

This link may also be helpful.

Upvotes: 5

Related Questions