Rob Wormald c9844a2f01 feat(elements): enable Shadow DOM v1 and slots (#24861)
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
2018-08-30 21:33:14 -07:00

36 lines
728 B
TypeScript

import {Component, Input, ViewEncapsulation} from '@angular/core';
@Component({
selector: 'hello-world-el',
template: `Hello {{name}}!`,
})
export class HelloWorldComponent {
@Input() name: string = 'World';
}
@Component({
selector: 'hello-world-shadow-el',
template: `Hello {{name}}!`,
encapsulation: ViewEncapsulation.ShadowDom
})
export class HelloWorldShadowComponent {
@Input() name: string = 'World';
}
@Component({
selector: 'test-card',
template: `
<header>
<slot name="card-header"></slot>
</header>
<slot></slot>
<footer>
<slot name="card-footer"></slot>
</footer>`,
encapsulation: ViewEncapsulation.ShadowDom,
styles: []
})
export class TestCardComponent {
}