jpzwarte/poc.md

## poc.md

      
    Raw
  

              poc.md
            
          
    PoC scoped custom element registries in Angular


Render the AppComponent as a custom element

export class AppModule {
  ngDoBootstrap(): void {
    customElements.define('mg-root', createCustomIvyElement(AppComponent));
  }
}

Set AppComponent encapsulation to ShadowDom

@Component({
  ...
  encapsulation: ViewEncapsulation.ShadowDom
})

Add @ElementDefinitions decorator to AppComponent

@Component({
  ...
})
@ElementDefinitions({ 'dna-page-header': PageHeader })
export class AppComponent {
  ...
}

Add @ElementDefinitions to any component using web components

@Component({
  selector: 'mg-foo',
  template: `
    <dna-alert>Foo works!</dna-alert>
    <p>
      foo works!
    </p>
  `,
  styles: [`
    :host { display: block; }
    p { color: hotpink; }
  `]
})
@ElementDefinitions({ 'dna-alert': Alert })
export class FooComponent {}

Use the root custom element to render your angular app in index.html

<body>
  <mg-root></mg-root>
</body>

Add polyfill to polyfills.ts

import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js';

Disable zone.js


Remove zone.js polyfill
Set ngZone to noop

platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' })
  .catch(err => console.error(err));

Pizza