fix(customElementDependencyStyles): Recursively add styles from impor…

…ted components. Missing feature, store available styles to avoid dupes. close vuejs#4662

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; }`)
     })
   })
 

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)]
   }
 }