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