anchor.diff:  }
   
   @Component(
  -    selector: "outer-with-indirect-nested",
  -    template: "OUTER(<simple><div><ng-content></ng-content></div></simple>)",
  +    selector: 'outer-with-indirect-nested',
  +    template: 'OUTER(<simple><div><ng-content></ng-content></div></simple>)',
       directives: const [Simple])
   class OuterWithIndirectNestedComponent {}
   
   @Component(
  -    selector: "outer",
  -    template:
  -        "OUTER(<inner><ng-content select=\".left\" class=\"left\"></ng-content><ng-content></ng-content></inner>)",
  +    selector: 'outer',
  +    template: 'OUTER(<inner>'
  +        '<ng-content select=".left" class="left"></ng-content>'
  +        '<ng-content></ng-content>'
  +        '</inner>)',
       directives: const [InnerComponent])
   class OuterComponent {}
   
   @Component(
  -    selector: "inner",
  -    template:
  -        "INNER(<innerinner><ng-content select=\".left\" class=\"left\"></ng-content><ng-content></ng-content></innerinner>)",
  +    selector: 'inner',
  +    template: 'INNER(<innerinner>'
  +        '<ng-content select=".left" class="left"></ng-content>'
  +        '<ng-content></ng-content></innerinner>)',
       directives: const [InnerInnerComponent])
   class InnerComponent {}
   
   @Component(
  -    selector: "innerinner",
  -    template:
  -        "INNERINNER(<ng-content select=\".left\"></ng-content>,<ng-content></ng-content>)",
  +    selector: 'innerinner',
  +    template: 'INNERINNER('
  +        '<ng-content select=".left"></ng-content>,'
  +        '<ng-content></ng-content>)',
       directives: const [])
   class InnerInnerComponent {}
   
   @Component(
  -    selector: "conditional-content",
  -    template:
  -        "<div>(<div *manual><ng-content select=\".left\"></ng-content></div>, <ng-content></ng-content>)</div>",
  +    selector: 'conditional-content',
  +    template: '<div>(<div *manual>'
  +        '<ng-content select=".left"></ng-content></div>, '
  +        '<ng-content></ng-content>)</div>',
       directives: const [ManualViewportDirective])
  -class ConditionalContentComponent {}
  -
  -@Component(
  -    selector: "conditional-text",
  -    template:
  -        "MAIN(<template manual>FIRST(<template manual>SECOND(<ng-content></ng-content>)</template>)</template>)",
  +class ConditionalContentComponent {
  +  @ViewChild(ManualViewportDirective)
  +  ManualViewportDirective viewport;
  +}
  +
  +@Component(
  +    selector: 'conditional-text',
  +    template: 'MAIN(<template manual>'
  +        'FIRST(<template manual>SECOND(<ng-content></ng-content>)</template>)'
  +        '</template>)',
       directives: const [ManualViewportDirective])
  -class ConditionalTextComponent {}
  -
  -@Component(
  -    selector: "tab",
  -    template: "<div><div *manual>TAB(<ng-content></ng-content>)</div></div>",
  -    directives: const [ManualViewportDirective])
  -class Tab {}
  -
  -@Component(
  -    selector: "tree2",
  -    inputs: const ["depth"],
  -    template: "TREE2({{depth}}:<tree *manual [depth]=\"depth+1\"></tree>)",
  -    directives: const [ManualViewportDirective, Tree])
  +class ConditionalTextComponent {
  +  @ViewChildren(ManualViewportDirective)
  +  QueryList<ManualViewportDirective> viewports;
  +}
  +
  +@Component(
  +    selector: 'tree2',
  +    inputs: const ['depth'],
  +    template: 'TREE2({{depth}}:<tree *manual [depth]="depth+1"></tree>)',
  +    directives: const [ManualViewportDirective, RecursiveTree])
   class Tree2 {
     var depth = 0;
  -}
  -
  -@Component(
  -    selector: "tree",
  -    inputs: const ["depth"],
  -    template: "TREE({{depth}}:<tree *manual [depth]=\"depth+1\"></tree>)",
  -    directives: const [ManualViewportDirective, Tree, Tree])
  +
  +  @ViewChild(ManualViewportDirective)
  +  ManualViewportDirective viewport;
  +}
  +
  +@Component(
  +    selector: 'tree',
  +    inputs: const ['depth'],
  +    template: 'TREE({{depth}}:<tree *manual [depth]="depth+1"></tree>)',
  +    directives: const [ManualViewportDirective, Tree])
   class Tree {
     var depth = 0;
  -}
  -
  -@Component(selector: "cmp-d", template: '''<d>{{tagName}}</d>''')
  +
  +  @ViewChild(ManualViewportDirective)
  +  ManualViewportDirective viewport;
  +}
  +
  +@Component(
  +  selector: 'tree',
  +  inputs: const ['depth'],
  +  template: 'TREE({{depth}}:<tree2 *manual [depth]="depth+1"></tree2>)',
  +  directives: const [ManualViewportDirective, Tree2],
  +)
  +class RecursiveTree {
  +  var depth = 0;
  +
  +  @ViewChild(ManualViewportDirective)
  +  ManualViewportDirective viewport;
  +
  +  @ViewChild(Tree2)
  +  Tree2 tree2;
  +}
  +
  +@Component(
  +  selector: 'cmp-d',
  +  template: '<d>{{tagName}}</d>',
  +)
   class CmpD {
     String tagName;
     CmpD(ElementRef elementRef) {
  
positive.code: }
  
  @Component(
      selector: "cmp-b",
      template: '''<ng-content></ng-content><cmp-d></cmp-d>''',
      directives: const [CmpD])
  class CmpB {}
  
  @Component(
      selector: "cmp-a",
      template: '''<ng-content></ng-content><cmp-c></cmp-c>''',
      directives: const [CmpC])
  class CmpA {}
  
  @Component(
      selector: "cmp-b11", template: '''{{\'b11\'}}''', directives: const [])
  class CmpB11 {}
  
  @Component(
      selector: "cmp-b12", template: '''{{\'b12\'}}''', directives: const [])
  class CmpB12 {}
  
  @Component(
      selector: "cmp-b21", template: '''{{\'b21\'}}''', directives: const [])
  class CmpB21 {}
  
  @Component(
      selector: "cmp-b22", template: '''{{\'b22\'}}''', directives: const [])
  class CmpB22 {}
  
  @Component(
      selector: "cmp-a1",
      template: '''{{\'a1\'}}<cmp-b11></cmp-b11><cmp-b12></cmp-b12>''',
      directives: const [CmpB11, CmpB12])
  class CmpA1 {}
  
  @Component(
      selector: "cmp-a2",
      template: '''{{\'a2\'}}<cmp-b21></cmp-b21><cmp-b22></cmp-b22>''',
      directives: const [CmpB21, CmpB22])
  class CmpA2 {}
  
negative.code:   }
  }
  
  @Component(
    selector: 'cmp-c',
    template: '<c>{{tagName}}</c>',
  )
  class CmpC {
    String tagName;
    CmpC(ElementRef elementRef) {
  