From 782895d3868fb37065d8668d7ecddfcb8ef083bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Thu, 10 Aug 2023 00:01:15 +0800
Subject: [PATCH] fix: When ce is used multiple times, subcomponents can hang
 on the style (#60)

---
 .../src/inject/inject-api-custom-element.ts   | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/sub-style/src/inject/inject-api-custom-element.ts b/packages/sub-style/src/inject/inject-api-custom-element.ts
index a75a6f7..8522fae 100644
--- a/packages/sub-style/src/inject/inject-api-custom-element.ts
+++ b/packages/sub-style/src/inject/inject-api-custom-element.ts
@@ -14,18 +14,22 @@ const injectBindFnContent
   = 'instance.addCEChildStyle = this._addChildStyles.bind(this);\n'
   + '        instance.removeCEChildStyle = this._removeChildStyles.bind(this);\n        '
 
-const injectAddAndRemoveStyle = ' _addChildStyles(styles, instance) {\n'
+const injectAddAndRemoveStyle = '_addChildStyles(styles, instance) {\n'
   + '    if (styles) {\n'
   + '      const styleContent = styles.join();\n'
-  + '      let cecStyle = /* @__PURE__ */ new Set();\n'
+  // eslint-disable-next-line no-template-curly-in-string
+  + '      const ceKey = `__${this._instance.uid}`;\n'
+  + '      let ceKeySet = /* @__PURE__ */ new Set();\n'
   + '      if (ceChildStyleMap.has(styleContent)) {\n'
-  + '        cecStyle = ceChildStyleMap.get(styleContent);\n'
-  + '        cecStyle.add(instance.uid);\n'
-  + '        ceChildStyleMap.set(styleContent, cecStyle);\n'
-  + '        return;\n'
+  + '        ceKeySet = ceChildStyleMap.get(styleContent);\n'
+  + '        if (ceKeySet.has(ceKey)) {\n'
+  + '          ceKeySet.add(ceKey);\n'
+  + '          ceChildStyleMap.set(styleContent, ceKeySet);\n'
+  + '          return;\n'
+  + '        }\n'
   + '      }\n'
-  + '      cecStyle.add(instance.uid);\n'
-  + '      ceChildStyleMap.set(styleContent, cecStyle);\n'
+  + '      ceKeySet.add(ceKey);\n'
+  + '      ceChildStyleMap.set(styleContent, ceKeySet);\n'
   // eslint-disable-next-line no-template-curly-in-string
   + '      const ceStyleId = `data-v-ce-${instance.uid}`;\n'
   + '      styles.forEach((css, index) => {\n'
@@ -52,8 +56,10 @@ const injectAddAndRemoveStyle = ' _addChildStyles(styles, instance) {\n'
   + '      const styleContent = styles.join();\n'
   + '      let cecStyle = /* @__PURE__ */ new Set();\n'
   + '      if (ceChildStyleMap.has(styleContent)) {\n'
+  // eslint-disable-next-line no-template-curly-in-string
+  + '        const ceKey = `__${this._instance.uid}`;\n'
   + '        cecStyle = ceChildStyleMap.get(styleContent);\n'
-  + '        cecStyle.delete(uid);\n'
+  + '        cecStyle.delete(ceKey);\n'
   + '        if (cecStyle.size === 0) {\n'
   // eslint-disable-next-line no-template-curly-in-string
   + '          const sList = this.shadowRoot.querySelectorAll(`[data-v-ce-${uid}]`);\n'