cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(elements): enable Shadow DOM v1 and slots (#24861)

Browse Source 
When using ViewEncapsulation.ShadowDom, Angular will not remove the child nodes of the DOM node a root Component is bootstrapped into. This enables developers building Angular Elements to use the `<slot>` element to do native content projection.

PR Close #24861
This commit is contained in:
Rob Wormald
2018-07-15 18:53:18 -07:00
committed by Misko Hevery
parent 4815b92495
commit c9844a2f01
10 changed files with 32 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
integration/ng_elements/src/app.ts
View File

@ -1,8 +1,8 @@
import {HelloWorldComponent, HelloWorldShadowComponent, TestCardComponent} from './elements';
import {NgModule, Injector} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Injector, NgModule} from '@angular/core';
import {createCustomElement} from '@angular/elements';
import {BrowserModule} from '@angular/platform-browser';
import {HelloWorldComponent, HelloWorldShadowComponent, TestCardComponent} from './elements';
@NgModule({
@ -11,23 +11,13 @@ import {createCustomElement} from '@angular/elements';
imports: [BrowserModule],
})
export class AppModule {
constructor(private injector:Injector){
constructor(private injector: Injector) {
customElements.define('hello-world-el', createCustomElement(HelloWorldComponent, {injector}));
customElements.define(
'hello-world-el',
createCustomElement(HelloWorldComponent, {injector})
);
customElements.define(
'hello-world-shadow-el',
createCustomElement(HelloWorldShadowComponent, {injector})
);
customElements.define(
'test-card',
createCustomElement(HelloWorldShadowComponent, {injector})
);
}
ngDoBootstrap(){
'hello-world-shadow-el', createCustomElement(HelloWorldShadowComponent, {injector}));
customElements.define('test-card', createCustomElement(TestCardComponent, {injector}));
}
ngDoBootstrap() {}
}
export {HelloWorldComponent};