diff --git a/packages/core/src/render3/instructions/element.ts b/packages/core/src/render3/instructions/element.ts
index 114351d6ca4bc..18c99c35ff610 100644
--- a/packages/core/src/render3/instructions/element.ts
+++ b/packages/core/src/render3/instructions/element.ts
@@ -65,7 +65,7 @@ export function ɵɵelementStart(
   }
 
   if ((tNode.flags & TNodeFlags.hasInitialStyling) === TNodeFlags.hasInitialStyling) {
-    renderInitialStyling(renderer, native, tNode);
+    renderInitialStyling(renderer, native, tNode, false);
   }
 
   appendChild(native, tNode, lView);
@@ -222,7 +222,7 @@ export function ɵɵelementHostAttrs(attrs: TAttributes) {
       // attribute values to the element.
       if (stylingNeedsToBeRendered) {
         const renderer = lView[RENDERER];
-        renderInitialStyling(renderer, native, tNode);
+        renderInitialStyling(renderer, native, tNode, true);
       }
     }
   }
diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts
index f8f37c5c59c3c..03ddd89663b9d 100644
--- a/packages/core/src/render3/instructions/shared.ts
+++ b/packages/core/src/render3/instructions/shared.ts
@@ -31,7 +31,7 @@ import {BINDING_INDEX, CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DECLARATION_VIE
 import {assertNodeOfPossibleTypes} from '../node_assert';
 import {isNodeMatchingSelectorList} from '../node_selector_matcher';
 import {ActiveElementFlags, enterView, executeElementExitFn, getBindingsEnabled, getCheckNoChangesMode, getIsParent, getPreviousOrParentTNode, getSelectedIndex, hasActiveElementFlag, incrementActiveDirectiveId, leaveView, leaveViewProcessExit, setActiveHostElement, setBindingRoot, setCheckNoChangesMode, setCurrentDirectiveDef, setCurrentQueryIndex, setPreviousOrParentTNode, setSelectedIndex} from '../state';
-import {writeStylingValueDirectly} from '../styling/bindings';
+import {renderStylingMap, writeStylingValueDirectly} from '../styling/bindings';
 import {NO_CHANGE} from '../tokens';
 import {isAnimationProp} from '../util/attrs_utils';
 import {INTERPOLATION_DELIMITER, renderStringify, stringifyForError} from '../util/misc_utils';
@@ -1833,13 +1833,22 @@ export function textBindingInternal(lView: LView, index: number, value: string):
  * applied once the element is instantiated. This function applies each of the static
  * style and class entries to the element.
  */
-export function renderInitialStyling(renderer: Renderer3, native: RElement, tNode: TNode) {
-  if (tNode.classes) {
-    const classes = getInitialStylingValue(tNode.classes);
-    writeStylingValueDirectly(renderer, native, classes, true, null);
+export function renderInitialStyling(
+    renderer: Renderer3, native: RElement, tNode: TNode, append: boolean) {
+  if (tNode.classes !== null) {
+    if (append) {
+      renderStylingMap(renderer, native, tNode.classes, true);
+    } else {
+      const classes = getInitialStylingValue(tNode.classes);
+      writeStylingValueDirectly(renderer, native, classes, true, null);
+    }
   }
-  if (tNode.styles) {
-    const styles = getInitialStylingValue(tNode.styles);
-    writeStylingValueDirectly(renderer, native, styles, false, null);
+  if (tNode.styles !== null) {
+    if (append) {
+      renderStylingMap(renderer, native, tNode.styles, false);
+    } else {
+      const styles = getInitialStylingValue(tNode.styles);
+      writeStylingValueDirectly(renderer, native, styles, false, null);
+    }
   }
 }
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
index 1afba77263cdd..1f169c4df8e57 100644
--- a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -107,6 +107,9 @@
   {
     "name": "RENDERER_FACTORY"
   },
+  {
+    "name": "RendererStyleFlags3"
+  },
   {
     "name": "SANITIZER"
   },
@@ -578,6 +581,9 @@
   {
     "name": "renderStringify"
   },
+  {
+    "name": "renderStylingMap"
+  },
   {
     "name": "renderView"
   },
@@ -605,6 +611,9 @@
   {
     "name": "setBindingRoot"
   },
+  {
+    "name": "setClass"
+  },
   {
     "name": "setClassName"
   },
@@ -644,6 +653,9 @@
   {
     "name": "setSelectedIndex"
   },
+  {
+    "name": "setStyle"
+  },
   {
     "name": "setStyleAttr"
   },
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
index 176f911cda732..a82221c3f86e0 100644
--- a/packages/core/test/bundling/todo/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -1163,6 +1163,9 @@
   {
     "name": "renderStringify"
   },
+  {
+    "name": "renderStylingMap"
+  },
   {
     "name": "renderView"
   },