clarify adding class directly to elementRef instead of on host property

Author: annieyw

src/cdk/tree/nested-node.ts

@@ -61,6 +61,8 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
               protected _tree: CdkTree<T>,
               protected _differs: IterableDiffers) {
     super(_elementRef, _tree);
+    // The classes are directly added here instead of in the host property because classes on
+    // the host property are not inherited with View Engine.
     this._elementRef.nativeElement.classList.add('cdk-tree-node', 'cdk-nested-tree-node');
   }
 

src/cdk/tree/tree.ts

@@ -350,6 +350,8 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
   constructor(protected _elementRef: ElementRef<HTMLElement>,
               protected _tree: CdkTree<T>) {
     CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode<T>;
+    // The classes are directly added here instead of in the host property because classes on
+    // the host property are not inherited with View Engine.
     this._elementRef.nativeElement.classList.add('cdk-tree-node');
   }
 
@@ -385,7 +387,6 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
 }
 
 function getParentNodeAriaLevel(nodeElement: HTMLElement): number {
-  debugger;
   let parent = nodeElement.parentElement;
   while (parent && isNodeElement(parent)) {
     parent = parent.parentElement;

src/material/tree/node.ts

@@ -59,6 +59,8 @@ export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T>
     super(_elementRef, _tree);
 
     this.tabIndex = Number(tabIndex) || 0;
+    // The classes are directly added here instead of in the host property because classes on
+    // the host property are not inherited with View Engine.
     this._elementRef.nativeElement.classList.add('mat-tree-node');
   }
 
@@ -121,6 +123,8 @@ export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implements AfterC
               @Attribute('tabindex') tabIndex: string) {
     super(_elementRef, _tree, _differs);
     this.tabIndex = Number(tabIndex) || 0;
+    // The classes are directly added here instead of in the host property because classes on
+    // the host property are not inherited with View Engine.
     this._elementRef.nativeElement.classList.add('mat-nested-tree-node');
   }
 

tools/public_api_guard/cdk/tree.d.ts

@@ -40,7 +40,6 @@ export declare class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements Afte
 export declare class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
     _nodeDefs: QueryList<CdkTreeNodeDef<T>>;
     _nodeOutlet: CdkTreeNodeOutlet;
-    _role: string;
     get dataSource(): DataSource<T> | Observable<T[]> | T[];
     set dataSource(dataSource: DataSource<T> | Observable<T[]> | T[]);
     trackBy: TrackByFunction<T>;
@@ -49,7 +48,7 @@ export declare class CdkTree<T> implements AfterContentChecked, CollectionViewer
         start: number;
         end: number;
     }>;
-    constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>);
+    constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef);
     _getNodeDef(data: T, i: number): CdkTreeNodeDef<T>;
     insertNode(nodeData: T, index: number, viewContainer?: ViewContainerRef, parentData?: T): void;
     ngAfterContentChecked(): void;

tools/public_api_guard/material/tree.d.ts

@@ -17,7 +17,6 @@ export declare class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implement
 
 export declare class MatTree<T> extends CdkTree<T> {
     _nodeOutlet: MatTreeNodeOutlet;
-    constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>);
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MatTree<any>, "mat-tree", ["matTree"], {}, {}, never, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatTree<any>, never>;
 }