Implement new content reprojection #2529

Overview

The current shadow dom emulation also contains content reprojection, but has the following limiations:

1. it is not very performant, as it tries to stay relatively close to the ShadowDOM spec (see e.g. Performance regression for tables that use shadow dom emulation #2298).
2. it does not allow moving the projected content programmatically somewhere else than the shadow dom of the component that contains the <content> tag (see Renderer: Is it possible to get a reference to transcluded content? #2320).

The main idea is:

1. attach component views already during compilation
2. reproject content also already during compilation

With this we have

1. performance gain as everything happens during compilation, which might be executed in a build step
2. reprojected nodes can be moved via directives out of the Shadow DOM to any place, as the nodes will be copied literally to the place of the <content> tag during compilation. I.e. a directive can use a ProtoViewRef + an ElementRef to also move projected content (see Support for manual content reprojection #1989).

Example for implementing TabGroup

<tab-group>
  <!-- Tab label can be set via attribute with the content directly inside of <tab> -->
  <tab label="Vegetables">Carrots, Beets </tab>
  <!-- Tab label can also be a full element -->
  <tab>
    <tab-label> Fruits </tab-label>
    <tab-body>Apples, Cherries</tab-body>
  </tab>
</tab-group>

@View({
  template: `
  <div class="header">
    <button *ng-for="#tab of tabs" (click)="selected = tab">
      <template ng-outlet="tab.labelTemplate"/>
    </button>
  </div>
  <div class="content">
      <template ng-outlet="selected.bodyTemplate"/>
  <div>
`
})
@Component()
class TabGroup {
  selected:Tab = null;
  constructor(@Query(Tab) tabs) {}
}

@View({
  template: `
    <template ng-template-ref>
      {{labelAttribute}}
      <ng-content select="tab-label"/>
    </template>
    <template ng-template-ref>
      <ng-content select="tab-body"/>
      <ng-content select="*"/>
    </span>
`
})
@Component()
class Tab {
  constructor(
    public @Attribute('label') labelAttribute:string,
    private @ViewQuery(TemplateRef) templates
  ) {}
  onInit() {
    this.labelTemplate = this.templates.get(0);
    this.bodyTemplate = this.templates.get(1);
  }
}

See #1931

Rules

• ng-content can only support projecting nodes directly under a host element.
  Locating elements further down does not work e.g. if NgFor is placed on a parent.
• <ng-content select="*"> is to be treated as "everything that has not been matched by other ng-content tags".
• If an <ng-content> element is destroyed, its nodes will not overflow to a <ng-content select="*">, as the reprojection happens during compile time.
• light dom (projected content) has to be instantiated exactly once, regardeless of whether projection actually happens via ng-content (e.g. ng-content is used via NgIf), as the usage of the content in the light dom could have side effects
• trying to instantiate a ProtoView that contains a <ng-content> element multiple times needs to fail, as the light dom might have side effects and we cannot allow these to happen multiple times.
• trying to instantiate a ProtoView with an ElementRef that does not match the place where the ProtoView should not be allowed, as this would be very confusing to users.

Combination with native ShadowDOM

The only thing that Angular needs to do to support native ShadowDOM is to place the view content into a shadow root instead of the element children. A component can declare this like this:

@View({
  useShadowDom: true,
  template: '...'
})
...

Angular will then still already attach component views and project content during compilation. However, when component views are instantiated that have the flag useShadowDom set, Angular will move the child nodes of Elements into the shadow root of the Element.

Notes

• cycles: ProtoViews can contain cycles. Attaching component views can stop when they encounter a nested <template> (or *... or template attribute), as instantiation also stops at these places.
• for now append templates of nested components only on render side, as we get the most benefits there by cloning a single time. Also keep the View abstraction (instantiating a component would automatically also instantiate child Views and cache them).