diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index a086b31a2f1..c374e6faca7 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -354,8 +354,11 @@ describe('defineCustomElement', () => {
       container.innerHTML = `<my-el-with-nested-styles></my-el-with-nested-styles>`
       const el = container.childNodes[0] as VueElement
       const style = el.shadowRoot?.querySelectorAll('style')!
+
+      expect(style.length).toBe(3)
       expect(style[0].textContent).toBe(`.green-color { color: green; }`)
       expect(style[1].textContent).toBe(`.blue-back { color: blue; }`)
+      expect(style[2].textContent).toBe(`div { color: red; }`)
     })
   })
 
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index d0fdb9c09a9..ef447990812 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -392,6 +392,7 @@ export class VueElement extends BaseClass {
               ...this._getChildrenComponentsStyles(nestedComponent)
             ]
           }
+          // Should have a method that adds styles only if not existing
           return nestedComponent.styles
             ? [...aggregatedStyles, ...nestedComponent.styles]
             : aggregatedStyles
@@ -404,6 +405,6 @@ export class VueElement extends BaseClass {
       componentStyles.push(...component.styles)
     }
 
-    return componentStyles
+    return [...new Set(componentStyles)]
   }
 }