fix(ivy): static host classes and styles should work on root component (#28926)

PR Close #28926

packages/core/src/render3/component.ts

@@ -22,9 +22,10 @@ import {ComponentDef, ComponentType, RenderFlags} from './interfaces/definition'
 import {TElementNode, TNode, TNodeFlags, TNodeType} from './interfaces/node';
 import {PlayerHandler} from './interfaces/player';
 import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
-import {CONTEXT, FLAGS, HEADER_OFFSET, LView, LViewFlags, RootContext, RootContextFlags, TVIEW} from './interfaces/view';
+import {CONTEXT, FLAGS, HEADER_OFFSET, HOST, LView, LViewFlags, RENDERER, RootContext, RootContextFlags, TVIEW} from './interfaces/view';
 import {applyOnCreateInstructions} from './node_util';
 import {enterView, getPreviousOrParentTNode, leaveView, resetComponentState, setCurrentDirectiveDef} from './state';
+import {renderInitialClasses, renderInitialStyles} from './styling/class_and_style_bindings';
 import {publishDefaultGlobalUtils} from './util/global_utils';
 import {defaultScheduler, renderStringify} from './util/misc_utils';
 import {getRootContext, getRootView} from './util/view_traversal_utils';
@@ -201,14 +202,20 @@ export function createRootComponent<T>(
 
   hostFeatures && hostFeatures.forEach((feature) => feature(component, componentDef));
 
+  const rootTNode = getPreviousOrParentTNode();
   if (tView.firstTemplatePass && componentDef.hostBindings) {
-    const rootTNode = getPreviousOrParentTNode();
     const expando = tView.expandoInstructions !;
     invokeHostBindingsInCreationMode(
         componentDef, expando, component, rootTNode, tView.firstTemplatePass);
     rootTNode.onElementCreationFns && applyOnCreateInstructions(rootTNode);
   }
 
+  if (rootTNode.stylingTemplate) {
+    const native = componentView[HOST] !as RElement;
+    renderInitialClasses(native, rootTNode.stylingTemplate, componentView[RENDERER]);
+    renderInitialStyles(native, rootTNode.stylingTemplate, componentView[RENDERER]);
+  }
+
   return component;
 }
 

packages/core/test/acceptance/integration_spec.ts

@@ -97,4 +97,18 @@ describe('acceptance integration tests', () => {
     expect(subInstance.dirs.first).toBeAnInstanceOf(SomeDir);
   });
 
+  it('should render host class and style on the root component', () => {
+    @Component({template: '...', host: {class: 'foo', style: 'color: red'}})
+    class MyApp {
+    }
+
+    TestBed.configureTestingModule({declarations: [MyApp]});
+    const fixture = TestBed.createComponent(MyApp);
+    const element = fixture.nativeElement;
+    fixture.detectChanges();
+
+    expect(element.style['color']).toEqual('red');
+    expect(element.classList.contains('foo')).toBeTruthy();
+  });
+
 });

packages/core/test/bundling/hello_world/bundle.golden_symbols.json

@@ -98,6 +98,9 @@
   {
     "name": "RENDERER_FACTORY"
   },
+  {
+    "name": "RendererStyleFlags3"
+  },
   {
     "name": "SANITIZER"
   },
@@ -410,6 +413,15 @@
   {
     "name": "renderEmbeddedTemplate"
   },
+  {
+    "name": "renderInitialClasses"
+  },
+  {
+    "name": "renderInitialStyles"
+  },
+  {
+    "name": "renderInitialStylingValues"
+  },
   {
     "name": "renderStringify"
   },
@@ -419,6 +431,9 @@
   {
     "name": "setBindingRoot"
   },
+  {
+    "name": "setClass"
+  },
   {
     "name": "setCurrentDirectiveDef"
   },
@@ -440,6 +455,9 @@
   {
     "name": "setPreviousOrParentTNode"
   },
+  {
+    "name": "setStyle"
+  },
   {
     "name": "setTNodeAndViewData"
   },