diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/entity/EntityPlugin.ts b/packages/roosterjs-content-model-core/lib/corePlugin/entity/EntityPlugin.ts
index bf1da0fcc28..928885c8b17 100644
--- a/packages/roosterjs-content-model-core/lib/corePlugin/entity/EntityPlugin.ts
+++ b/packages/roosterjs-content-model-core/lib/corePlugin/entity/EntityPlugin.ts
@@ -1,7 +1,7 @@
 import { findAllEntities } from './findAllEntities';
 import {
     createEntity,
-    generateEntityClassNames,
+    generateEntityClassList,
     getAllEntityWrappers,
     getObjectKeys,
     isEntityElement,
@@ -132,7 +132,7 @@ class EntityPlugin implements PluginWithState<EntityPluginState> {
             if (entityType && !isFakeEntity) {
                 if (operation == 'newEntity') {
                     entity.entityFormat.id = this.ensureUniqueId(entityType, id ?? '', wrapper);
-                    wrapper.className = generateEntityClassNames(entity.entityFormat);
+                    wrapper.classList.add(...generateEntityClassList(entity.entityFormat));
 
                     if (entity.entityFormat.isReadonly) {
                         wrapper.contentEditable = 'false';
diff --git a/packages/roosterjs-content-model-core/test/corePlugin/entity/EntityPluginTest.ts b/packages/roosterjs-content-model-core/test/corePlugin/entity/EntityPluginTest.ts
index 2f79d523656..aad8fb4f407 100644
--- a/packages/roosterjs-content-model-core/test/corePlugin/entity/EntityPluginTest.ts
+++ b/packages/roosterjs-content-model-core/test/corePlugin/entity/EntityPluginTest.ts
@@ -548,11 +548,11 @@ describe('EntityPlugin', () => {
             const entity = createEntity(wrapper, true, undefined, entityType, id);
             const doc = createContentModelDocument();
 
-            wrapper.className = entityUtils.generateEntityClassNames({
+            wrapper.classList.add(...entityUtils.generateEntityClassList({
                 entityType,
                 id: id,
                 isReadonly: true,
-            });
+            }));
             doc.blocks.push(entity);
             mockedModel = doc;
 
diff --git a/packages/roosterjs-content-model-dom/lib/domUtils/entityUtils.ts b/packages/roosterjs-content-model-dom/lib/domUtils/entityUtils.ts
index bca216c8496..d9bde29cb1d 100644
--- a/packages/roosterjs-content-model-dom/lib/domUtils/entityUtils.ts
+++ b/packages/roosterjs-content-model-dom/lib/domUtils/entityUtils.ts
@@ -107,12 +107,11 @@ function parseEntityClassName(
  * @param format The source entity format object
  * @returns A combined CSS class name string for entity wrapper
  */
-export function generateEntityClassNames(format: ContentModelEntityFormat): string {
+export function generateEntityClassList(format: ContentModelEntityFormat): string[] {
     return format.isFakeEntity
-        ? ''
-        : `${ENTITY_INFO_NAME} ${ENTITY_TYPE_PREFIX}${format.entityType ?? ''} ${
-              format.id ? `${ENTITY_ID_PREFIX}${format.id} ` : ''
-          }${ENTITY_READONLY_PREFIX}${format.isReadonly ? '1' : '0'}`;
+        ? []
+        : [`${ENTITY_INFO_NAME}`, `${ENTITY_TYPE_PREFIX}${format.entityType ?? ''}`, `${format.id ? `${ENTITY_ID_PREFIX}${format.id} ` : ''
+            }${ENTITY_READONLY_PREFIX}${format.isReadonly ? '1' : '0'}`];
 }
 
 /**
diff --git a/packages/roosterjs-content-model-dom/lib/formatHandlers/entity/entityFormatHandler.ts b/packages/roosterjs-content-model-dom/lib/formatHandlers/entity/entityFormatHandler.ts
index d1192fda95b..85dc33a262c 100644
--- a/packages/roosterjs-content-model-dom/lib/formatHandlers/entity/entityFormatHandler.ts
+++ b/packages/roosterjs-content-model-dom/lib/formatHandlers/entity/entityFormatHandler.ts
@@ -1,4 +1,4 @@
-import { generateEntityClassNames, parseEntityFormat } from '../../domUtils/entityUtils';
+import { generateEntityClassList, parseEntityFormat } from '../../domUtils/entityUtils';
 import type { EntityInfoFormat, IdFormat } from 'roosterjs-content-model-types';
 import type { FormatHandler } from '../FormatHandler';
 
@@ -12,7 +12,7 @@ export const entityFormatHandler: FormatHandler<EntityInfoFormat & IdFormat> = {
 
     apply: (format, element) => {
         if (!format.isFakeEntity) {
-            element.className = generateEntityClassNames(format);
+            element.classList.add(...generateEntityClassList(format));
         }
 
         if (format.isReadonly) {
diff --git a/packages/roosterjs-content-model-dom/lib/index.ts b/packages/roosterjs-content-model-dom/lib/index.ts
index 12077de7df0..6205c606501 100644
--- a/packages/roosterjs-content-model-dom/lib/index.ts
+++ b/packages/roosterjs-content-model-dom/lib/index.ts
@@ -29,7 +29,7 @@ export {
     findClosestEntityWrapper,
     getAllEntityWrappers,
     parseEntityFormat,
-    generateEntityClassNames,
+    generateEntityClassList,
     addDelimiters,
     isEntityDelimiter,
     isBlockEntityContainer,
diff --git a/packages/roosterjs-content-model-dom/test/domUtils/entityUtilTest.ts b/packages/roosterjs-content-model-dom/test/domUtils/entityUtilTest.ts
index c7d0c335acf..37d48d3822d 100644
--- a/packages/roosterjs-content-model-dom/test/domUtils/entityUtilTest.ts
+++ b/packages/roosterjs-content-model-dom/test/domUtils/entityUtilTest.ts
@@ -4,7 +4,7 @@ import {
     addDelimiters,
     findClosestBlockEntityContainer,
     findClosestEntityWrapper,
-    generateEntityClassNames,
+    generateEntityClassList,
     getAllEntityWrappers,
     isBlockEntityContainer,
     isEntityDelimiter,
@@ -106,13 +106,13 @@ describe('parseEntityFormat', () => {
     });
 });
 
-describe('generateEntityClassNames', () => {
+describe('generateEntityClassList', () => {
     it('Empty format', () => {
         const format: ContentModelEntityFormat = {};
 
-        const className = generateEntityClassNames(format);
+        const className = generateEntityClassList(format);
 
-        expect(className).toBe('_Entity _EType_ _EReadonly_0');
+        expect(className).toBe(['_Entity _EType_ _EReadonly_0']);
     });
 
     it('Format with type', () => {
@@ -120,9 +120,9 @@ describe('generateEntityClassNames', () => {
             entityType: 'A',
         };
 
-        const className = generateEntityClassNames(format);
+        const className = generateEntityClassList(format);
 
-        expect(className).toBe('_Entity _EType_A _EReadonly_0');
+        expect(className).toBe(['_Entity _EType_A _EReadonly_0']);
     });
 
     it('Format with type and id and readonly', () => {
@@ -132,9 +132,9 @@ describe('generateEntityClassNames', () => {
             isReadonly: true,
         };
 
-        const className = generateEntityClassNames(format);
+        const className = generateEntityClassList(format);
 
-        expect(className).toBe('_Entity _EType_A _EId_B _EReadonly_1');
+        expect(className).toBe(['_Entity _EType_A _EId_B _EReadonly_1']);
     });
 
     it('Fake entity format with type and id and readonly', () => {
@@ -145,9 +145,9 @@ describe('generateEntityClassNames', () => {
             isFakeEntity: true,
         };
 
-        const className = generateEntityClassNames(format);
+        const className = generateEntityClassList(format);
 
-        expect(className).toBe('');
+        expect(className).toBe([]);
     });
 });