diff --git a/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap
new file mode 100644
index 00000000000..9663539e12a
--- /dev/null
+++ b/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap
@@ -0,0 +1,192 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CE style attrs injection > codegen > <script> w/ default export 1`] = `
+"const __default__ = { setup() {} }
+import { useCEStyleAttrs as _useCEStyleAttrs } from 'vue'
+const __injectCSSVars__ = () => {
+
+_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: _ctx.msg3, 'other-attr': _ctx.msg },
+   "src": _ctx.msg,
+   [_ctx.msg]: _ctx.msg,
+   "xlink:special": _ctx.msg,
+ },
+]))}
+const __setup__ = __default__.setup
+__default__.setup = __setup__
+  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
+  : __injectCSSVars__
+
+export default __default__"
+`;
+
+exports[`CE style attrs injection > codegen > <script> w/ default export in strings/comments 1`] = `
+"
+          // export default {}
+          const __default__ = {}
+        
+import { useCEStyleAttrs as _useCEStyleAttrs } from 'vue'
+const __injectCSSVars__ = () => {
+
+_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: _ctx.msg3, 'other-attr': _ctx.msg },
+   "src": _ctx.msg,
+   [_ctx.msg]: _ctx.msg,
+   "xlink:special": _ctx.msg,
+ },
+]))}
+const __setup__ = __default__.setup
+__default__.setup = __setup__
+  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
+  : __injectCSSVars__
+
+export default __default__"
+`;
+
+exports[`CE style attrs injection > codegen > <script> w/ no default export 1`] = `
+"const msg = 1
+const __default__ = {}
+import { useCEStyleAttrs as _useCEStyleAttrs } from 'vue'
+const __injectCSSVars__ = () => {
+
+_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: _ctx.msg3, 'other-attr': _ctx.msg },
+   "src": _ctx.msg,
+   [_ctx.msg]: _ctx.msg,
+   "xlink:special": _ctx.msg,
+ },
+]))}
+const __setup__ = __default__.setup
+__default__.setup = __setup__
+  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
+  : __injectCSSVars__
+
+export default __default__"
+`;
+
+exports[`CE style attrs injection > codegen > w/ <script setup> 1`] = `
+"import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'
+const msg = 'red'
+export default {
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: _ctx.msg3, 'other-attr': msg },
+   "src": msg,
+   [msg]: msg,
+   "xlink:special": msg,
+ },
+]))
+
+return { msg }
+}
+
+}"
+`;
+
+exports[`CE style attrs injection > codegen > w/ <script setup> using the same var multiple times 1`] = `
+"import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'
+const msg = 'red'
+        
+export default {
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: _ctx.msg3, 'other-attr': msg },
+ },
+]))
+
+        
+return { msg }
+}
+
+}"
+`;
+
+exports[`CE style attrs injection > generating correct code for nested paths 1`] = `
+"const a = 1
+const __default__ = {}
+import { useCEStyleAttrs as _useCEStyleAttrs } from 'vue'
+const __injectCSSVars__ = () => {
+
+_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: _ctx.msg3, 'other-attr': _ctx.msg },
+   "src": _ctx.msg,
+   [_ctx.msg]: _ctx.msg,
+   "xlink:special": _ctx.msg,
+ },
+]))}
+const __setup__ = __default__.setup
+__default__.setup = __setup__
+  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
+  : __injectCSSVars__
+
+export default __default__"
+`;
+
+exports[`CE style attrs injection > w/ <script setup> binding analysis 1`] = `
+"import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'
+import { ref } from 'vue'
+        const msg = 'red'
+        
+export default {
+  props: {
+          msg3: String
+        },
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: __props.msg3, 'other-attr': msg },
+   "src": msg2.value,
+   [msg]: msg,
+   "xlink:special": __props.msg3,
+ },
+]))
+
+        const msg2 = ref('10px')
+        
+        
+return { msg, msg2, ref }
+}
+
+}"
+`;
+
+exports[`CE style attrs injection > w/ normal <script> binding analysis 1`] = `
+"
+      const __default__ = {
+        setup() {
+          return {
+            msg: ref('100px')
+          }
+        }
+      }
+      
+import { useCEStyleAttrs as _useCEStyleAttrs } from 'vue'
+const __injectCSSVars__ = () => {
+
+_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: _ctx.msg3, 'other-attr': _ctx.msg },
+   "src": _ctx.msg,
+   [_ctx.msg]: _ctx.msg,
+   "xlink:special": _ctx.msg,
+ },
+]))}
+const __setup__ = __default__.setup
+__default__.setup = __setup__
+  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
+  : __injectCSSVars__
+
+export default __default__"
+`;
diff --git a/packages/compiler-sfc/__tests__/ceStyleAttrs.spec.ts b/packages/compiler-sfc/__tests__/ceStyleAttrs.spec.ts
new file mode 100644
index 00000000000..3919166d0a7
--- /dev/null
+++ b/packages/compiler-sfc/__tests__/ceStyleAttrs.spec.ts
@@ -0,0 +1,356 @@
+import { parse } from '../src'
+import { assertCode, compileSFCScript } from './utils'
+
+describe('CE style attrs injection', () => {
+  test('generating correct code for nested paths', () => {
+    const { content } = compileSFCScript(
+      `<script>const a = 1</script>\n` +
+        `<style :id="{ id: msg3, 'other-attr': msg }"
+id="{ id: msg2, 'other-attr': msg }"
+.id="{ id: msg, 'other-attr': msg }"
+v-bind:src="msg"
+v-bind:[msg]="msg"
+:[msg]="msg"
+:xlink:special="msg">div{
+          color: red;
+        }</style>`,
+    )
+
+    expect(content).toMatch(`_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: _ctx.msg3, 'other-attr': _ctx.msg },
+   "src": _ctx.msg,
+   [_ctx.msg]: _ctx.msg,
+   "xlink:special": _ctx.msg,
+ },
+]))}`)
+    assertCode(content)
+  })
+
+  test('w/ normal <script> binding analysis', () => {
+    const { content } = compileSFCScript(
+      `<script>
+      export default {
+        setup() {
+          return {
+            msg: ref('100px')
+          }
+        }
+      }
+      </script>\n` +
+        `<style :id="{ id: msg3, 'other-attr': msg }"
+      id="{ id: msg2, 'other-attr': msg }"
+      .id="{ id: msg, 'other-attr': msg }"
+      v-bind:src="msg"
+      v-bind:[msg]="msg"
+      :[msg]="msg"
+      :xlink:special="msg">
+          div {
+            color: red;
+          }
+        </style>`,
+    )
+    expect(content).toMatch(`_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: _ctx.msg3, 'other-attr': _ctx.msg },
+   "src": _ctx.msg,
+   [_ctx.msg]: _ctx.msg,
+   "xlink:special": _ctx.msg,
+ },
+]))}`)
+    expect(content).toMatch(
+      `import { useCEStyleAttrs as _useCEStyleAttrs } from 'vue'`,
+    )
+    assertCode(content)
+  })
+
+  test('w/ <script setup> binding analysis', () => {
+    const { content } = compileSFCScript(
+      `<script setup>
+        import { defineProps, ref } from 'vue'
+        const msg = 'red'
+        const msg2 = ref('10px')
+        defineProps({
+          msg3: String
+        })
+        </script>\n` +
+        `<style :id="{ id: msg3, 'other-attr': msg }"
+      id="{ id: msg2, 'other-attr': msg }"
+      .id="{ id: msg, 'other-attr': msg }"
+      v-bind:src="msg2"
+      v-bind:[msg]="msg"
+      :[msg]="msg3"
+      :xlink:special="msg3">
+          div {
+            color: red;
+          }
+        </style>`,
+    )
+    // should handle:
+    // 1. local const bindings
+    // 2. local potential ref bindings
+    // 3. props bindings (analyzed)
+    expect(content).toMatch(`_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: __props.msg3, 'other-attr': msg },
+   "src": msg2.value,
+   [msg]: msg,
+   "xlink:special": __props.msg3,
+ },
+]))`)
+    expect(content).toMatch(
+      `import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'`,
+    )
+    assertCode(content)
+  })
+
+  describe('codegen', () => {
+    test('<script> w/ no default export', () => {
+      assertCode(
+        compileSFCScript(
+          `<script>const msg = 1</script>\n` +
+            `<style :id="{ id: msg3, 'other-attr': msg }"
+id="{ id: msg2, 'other-attr': msg }"
+.id="{ id: msg, 'other-attr': msg }"
+v-bind:src="msg"
+v-bind:[msg]="msg"
+:[msg]="msg"
+:xlink:special="msg">div{ color: red; }</style>`,
+        ).content,
+      )
+    })
+
+    test('<script> w/ default export', () => {
+      assertCode(
+        compileSFCScript(
+          `<script>export default { setup() {} }</script>\n` +
+            `<style :id="{ id: msg3, 'other-attr': msg }"
+id="{ id: msg2, 'other-attr': msg }"
+.id="{ id: msg, 'other-attr': msg }"
+v-bind:src="msg"
+v-bind:[msg]="msg"
+:[msg]="msg"
+:xlink:special="msg">div{ color: red }</style>`,
+        ).content,
+      )
+    })
+
+    test('<script> w/ default export in strings/comments', () => {
+      assertCode(
+        compileSFCScript(
+          `<script>
+          // export default {}
+          export default {}
+        </script>\n` +
+            `<style :id="{ id: msg3, 'other-attr': msg }"
+id="{ id: msg2, 'other-attr': msg }"
+.id="{ id: msg, 'other-attr': msg }"
+v-bind:src="msg"
+v-bind:[msg]="msg"
+:[msg]="msg"
+:xlink:special="msg">div{ color: red }</style>`,
+        ).content,
+      )
+    })
+
+    test(`w/ <script setup>`, () => {
+      assertCode(
+        compileSFCScript(
+          `<script setup>const msg = 'red'</script>\n` +
+            `<style :id="{ id: msg3, 'other-attr': msg }"
+id="{ id: msg2, 'other-attr': msg }"
+.id="{ id: msg, 'other-attr': msg }"
+v-bind:src="msg"
+v-bind:[msg]="msg"
+:[msg]="msg"
+:xlink:special="msg">p { color: red }</style>`,
+        ).content,
+      )
+    })
+
+    test(`w/ <script setup> using the same var multiple times`, () => {
+      const { content } = compileSFCScript(
+        `<script setup>
+        const msg = 'red'
+        </script>\n` +
+          `<style :id="{ id: msg3, 'other-attr': msg }"
+id="{ id: msg2, 'other-attr': msg }"
+.id="{ id: msg, 'other-attr': msg }">
+        
+          p {
+            color: red;
+          }
+        </style>`,
+      )
+
+      // id should only be injected once, even if it is twice in style
+      expect(content).toMatch(`_useCEStyleAttrs(_ctx => ([
+  {
+   "id": { id: _ctx.msg3, 'other-attr': msg },
+ },
+]))`)
+      assertCode(content)
+    })
+
+    test('should be able to parse incomplete expressions', () => {
+      const {
+        descriptor: { ceStyleAttrs },
+      } = parse(
+        `<script setup>let xxx = 1</script>
+        <style scoped lang :id="xxx" :data-name="count.toString(">
+        label {
+         color:red
+        }
+        </style>`,
+      )
+      expect(ceStyleAttrs[0].length).toBe(2)
+      expect(ceStyleAttrs[0]).toMatchObject([
+        {
+          name: 'bind',
+          exp: {
+            content: 'xxx',
+            isStatic: false,
+            constType: 0,
+          },
+          arg: {
+            content: 'id',
+            isStatic: true,
+            constType: 3,
+          },
+        },
+        {
+          name: 'bind',
+          exp: {
+            content: 'count.toString(',
+            isStatic: false,
+            constType: 0,
+          },
+          arg: {
+            content: 'data-name',
+            isStatic: true,
+            constType: 3,
+          },
+        },
+      ])
+    })
+
+    test('It should correctly parse the case where there is no space after the script tag', () => {
+      const { content } = compileSFCScript(
+        `<script setup>import { ref as _ref } from 'vue';
+                let background = _ref('red')
+             </script>
+             <style :id="background">
+             h1 {color: red}
+             </style>`,
+      )
+      expect(content).toMatch(
+        `import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'\nimport { ref as _ref } from 'vue';\n                \nexport default {\n  setup(__props, { expose: __expose }) {\n  __expose();\n\n_useCEStyleAttrs(_ctx => ([\n  {\n   \"id\": _unref(background),\n },\n]))\nlet background = _ref('red')\n             \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}`,
+      )
+    })
+
+    test('With cssvars', () => {
+      const { content } = compileSFCScript(
+        `<script setup>import { ref as _ref } from 'vue';
+                let background = _ref('red')
+             </script>
+             <style :id="background">
+             label {
+               background: v-bind(background);
+             }
+             </style>`,
+      )
+      expect(content).toMatch(
+        `import { useCssVars as _useCssVars, unref as _unref, useCEStyleAttrs as _useCEStyleAttrs } from 'vue'\nimport { ref as _ref } from 'vue';\n                \nexport default {\n  setup(__props, { expose: __expose }) {\n  __expose();\n\n_useCEStyleAttrs(_ctx => ([\n  {\n   \"id\": _unref(background),\n },\n]))\n\n_useCssVars(_ctx => ({\n  \"xxxxxxxx-background\": (_unref(background))\n}))\nlet background = _ref('red')\n             \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}`,
+      )
+    })
+
+    test('Multiple style tags', () => {
+      const { content } = compileSFCScript(
+        `<script setup>import { ref as _ref } from 'vue';
+                let background = _ref('red')
+             </script>
+             <style :id="background">
+             label {
+               background: v-bind(background);
+             }
+             </style>
+             <style :id="background">
+             h1 {
+               background: v-bind(background);
+             }
+             </style>`,
+      )
+      expect(content).toMatch(
+        `import { useCssVars as _useCssVars, unref as _unref, useCEStyleAttrs as _useCEStyleAttrs } from 'vue'\nimport { ref as _ref } from 'vue';\n                \nexport default {\n  setup(__props, { expose: __expose }) {\n  __expose();\n\n_useCEStyleAttrs(_ctx => ([\n  {\n   \"id\": _unref(background),\n },\n  {\n   \"id\": _unref(background),\n },\n]))\n\n_useCssVars(_ctx => ({\n  \"xxxxxxxx-background\": (_unref(background))\n}))\nlet background = _ref('red')\n             \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}`,
+      )
+    })
+
+    describe('skip codegen in SSR', () => {
+      test('script setup, inline', () => {
+        const { content } = compileSFCScript(
+          `<script setup>
+          let size = 1
+          </script>\n` +
+            `<style :id="size">
+              div {
+                color: red
+              }
+            </style>`,
+          {
+            inlineTemplate: true,
+            templateOptions: {
+              ssr: true,
+            },
+          },
+        )
+        expect(content).not.toMatch(`_useCssVars`)
+      })
+
+      // #6926
+      test('script, non-inline', () => {
+        const { content } = compileSFCScript(
+          `<script setup>
+          let size = 1
+          </script>\n` +
+            `<style :id="size">
+              div {
+                color: red
+              }
+            </style>\``,
+          {
+            inlineTemplate: false,
+            templateOptions: {
+              ssr: true,
+            },
+          },
+        )
+        expect(content).not.toMatch(`_useCssVars`)
+      })
+
+      test('normal script', () => {
+        const { content } = compileSFCScript(
+          `<script>
+          export default {
+            setup() {
+              return {
+                size: ref('100px')
+              }
+            }
+          }
+          </script>\n` +
+            `<style :id="size">
+              div {
+                color: red
+              }
+            </style>\``,
+          {
+            templateOptions: {
+              ssr: true,
+            },
+          },
+        )
+        expect(content).not.toMatch(`_useCssVars`)
+      })
+    })
+  })
+})
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 2fa2241a7de..d75a82789d2 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -55,6 +55,7 @@ import { getImportedName, isCallOf, isLiteralNode } from './script/utils'
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
 import { isImportUsed } from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
+import { CE_STYLE_ATTRS_HELPER, genCEStyleAttrs } from './style/ceStyleAttrs'
 
 export interface SFCScriptCompileOptions {
   /**
@@ -764,6 +765,22 @@ export function compileScript(
     )
   }
 
+  if (
+    ctx.descriptor.ceStyleAttrs.length &&
+    // no need to do this when targeting SSR
+    !options.templateOptions?.ssr
+  ) {
+    ctx.helperImports.add(CE_STYLE_ATTRS_HELPER)
+    ctx.helperImports.add('unref')
+    ctx.s.prependLeft(
+      startOffset,
+      `\n${genCEStyleAttrs(
+        ctx.descriptor.ceStyleAttrs,
+        ctx.bindingMetadata,
+      )}\n`,
+    )
+  }
+
   // 8. finalize setup() argument signature
   let args = `__props`
   if (ctx.propsTypeDecl) {
diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
index f0ec926d1b9..9bbcf16ead2 100644
--- a/packages/compiler-sfc/src/parse.ts
+++ b/packages/compiler-sfc/src/parse.ts
@@ -1,12 +1,15 @@
 import {
+  type AttributeNode,
   type BindingMetadata,
   type CodegenSourceMapGenerator,
   type CompilerError,
+  type DirectiveNode,
   type ElementNode,
   NodeTypes,
   type ParserOptions,
   type RawSourceMap,
   type RootNode,
+  type SimpleExpressionNode,
   type SourceLocation,
   createRoot,
 } from '@vue/compiler-core'
@@ -79,6 +82,7 @@ export interface SFCDescriptor {
   script: SFCScriptBlock | null
   scriptSetup: SFCScriptBlock | null
   styles: SFCStyleBlock[]
+  ceStyleAttrs: Array<AttributeNode | DirectiveNode>[]
   customBlocks: SFCBlock[]
   cssVars: string[]
   /**
@@ -146,6 +150,7 @@ export function parse(
     script: null,
     scriptSetup: null,
     styles: [],
+    ceStyleAttrs: [],
     customBlocks: [],
     cssVars: [],
     slotted: false,
@@ -229,6 +234,8 @@ export function parse(
           )
         }
         descriptor.styles.push(styleBlock)
+        // ce style attrs
+        setPropsNodeForStyleAttrs(descriptor, node.props)
         break
       default:
         descriptor.customBlocks.push(createBlock(node, source, pad))
@@ -467,6 +474,28 @@ export function hmrShouldReload(
 
   return false
 }
+function setPropsNodeForStyleAttrs(
+  descriptor: SFCDescriptor,
+  props: Array<AttributeNode | DirectiveNode>,
+) {
+  const propsArr = props.filter(prop => {
+    // skip scoped and lang
+    if (prop.type === 6 && (prop.name === 'scoped' || prop.name === 'lang')) {
+      return false
+    }
+    return !(
+      prop.type === 7 &&
+      (((prop as DirectiveNode).arg! as SimpleExpressionNode).content ===
+        'scoped' ||
+        ((prop as DirectiveNode).arg! as SimpleExpressionNode).content ===
+          'lang')
+    )
+  })
+
+  if (propsArr.length > 0) {
+    descriptor.ceStyleAttrs.push(propsArr)
+  }
+}
 
 /**
  * Dedent a string.
diff --git a/packages/compiler-sfc/src/script/normalScript.ts b/packages/compiler-sfc/src/script/normalScript.ts
index 3b2f21d4863..59997c9198a 100644
--- a/packages/compiler-sfc/src/script/normalScript.ts
+++ b/packages/compiler-sfc/src/script/normalScript.ts
@@ -2,7 +2,8 @@ import { analyzeScriptBindings } from './analyzeScriptBindings'
 import type { ScriptCompileContext } from './context'
 import MagicString from 'magic-string'
 import { rewriteDefaultAST } from '../rewriteDefault'
-import { genNormalScriptCssVarsCode } from '../style/cssVars'
+import { CSS_VARS_HELPER, genCssVarsCode } from '../style/cssVars'
+import { CE_STYLE_ATTRS_HELPER, genCEStyleAttrs } from '../style/ceStyleAttrs'
 
 export const normalScriptDefaultVar = `__default__`
 
@@ -20,23 +21,30 @@ export function processNormalScript(
     let map = script.map
     const scriptAst = ctx.scriptAst!
     const bindings = analyzeScriptBindings(scriptAst.body)
-    const { cssVars } = ctx.descriptor
+    const { cssVars, ceStyleAttrs } = ctx.descriptor
     const { genDefaultAs, isProd } = ctx.options
 
-    if (cssVars.length || genDefaultAs) {
+    if (cssVars.length || ceStyleAttrs.length || genDefaultAs) {
       const defaultVar = genDefaultAs || normalScriptDefaultVar
       const s = new MagicString(content)
       rewriteDefaultAST(scriptAst.body, s, defaultVar)
       content = s.toString()
+      let injectCode = ''
+      let injectImporter = []
       if (cssVars.length && !ctx.options.templateOptions?.ssr) {
-        content += genNormalScriptCssVarsCode(
-          cssVars,
-          bindings,
-          scopeId,
-          !!isProd,
-          defaultVar,
-        )
+        injectCode += genCssVarsCode(cssVars, bindings, scopeId, !!isProd)
+        injectImporter.push(CSS_VARS_HELPER)
       }
+
+      if (ceStyleAttrs.length && !ctx.options.templateOptions?.ssr) {
+        injectCode += '\n' + genCEStyleAttrs(ceStyleAttrs, bindings)
+        injectImporter.push(CE_STYLE_ATTRS_HELPER)
+      }
+
+      if (injectCode) {
+        content += genInjectCode(injectCode, defaultVar, injectImporter)
+      }
+
       if (!genDefaultAs) {
         content += `\nexport default ${defaultVar}`
       }
@@ -54,3 +62,21 @@ export function processNormalScript(
     return script
   }
 }
+
+// <script setup> already gets the calls injected as part of the transform
+// this is only for single normal <script>
+function genInjectCode(
+  content: string,
+  defaultVar: string,
+  importer: string[],
+) {
+  const importerContent = importer.map(v => ` ${v} as _${v} `).join(',')
+  return (
+    `\nimport {${importerContent}} from 'vue'\n` +
+    `const __injectCSSVars__ = () => {\n${content}}\n` +
+    `const __setup__ = ${defaultVar}.setup\n` +
+    `${defaultVar}.setup = __setup__\n` +
+    `  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }\n` +
+    `  : __injectCSSVars__\n`
+  )
+}
diff --git a/packages/compiler-sfc/src/style/ceStyleAttrs.ts b/packages/compiler-sfc/src/style/ceStyleAttrs.ts
new file mode 100644
index 00000000000..c4b8d8360a4
--- /dev/null
+++ b/packages/compiler-sfc/src/style/ceStyleAttrs.ts
@@ -0,0 +1,99 @@
+import {
+  type AttributeNode,
+  type BindingMetadata,
+  type DirectiveNode,
+  NodeTypes,
+  type SimpleExpressionNode,
+  createRoot,
+  createSimpleExpression,
+  createTransformContext,
+  processExpression,
+} from '@vue/compiler-core'
+
+export const CE_STYLE_ATTRS_HELPER = `useCEStyleAttrs`
+
+export function genCEStyleAttrs(
+  ceStyleAttrs: Array<AttributeNode | DirectiveNode>[],
+  bindings: BindingMetadata,
+) {
+  let code = ''
+  for (let i = 0; i < ceStyleAttrs.length; i++) {
+    const ceStyleAttr = ceStyleAttrs[i]
+    code = `${code}${doGenStyleAttrsCode(ceStyleAttr, bindings)},\n`
+  }
+  return `_${CE_STYLE_ATTRS_HELPER}(_ctx => ([\n${code}]))`
+}
+
+function doGenStyleAttrsCode(
+  attrs: Array<AttributeNode | DirectiveNode>,
+  bindings: BindingMetadata,
+) {
+  const attrsExp = genAttrsFromList(attrs)
+  const exp = createSimpleExpression(attrsExp, false)
+  const context = createTransformContext(createRoot([]), {
+    prefixIdentifiers: true,
+    inline: true,
+    bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings,
+  })
+  const transformed = processExpression(exp, context)
+
+  return transformed.type === NodeTypes.SIMPLE_EXPRESSION
+    ? transformed.content
+    : transformed.children
+        .map(c => {
+          return typeof c === 'string' ? c : (c as SimpleExpressionNode).content
+        })
+        .join('')
+}
+
+function genAttrsFromList(attrs: Array<AttributeNode | DirectiveNode>) {
+  let code = '  {\n'
+  let keySet = new Set<string>()
+  for (let i = 0; i < attrs.length; i++) {
+    const attr = attrs[i]
+    if (attr.type === 6) {
+      const key = `"${attr.name}"`
+      if (keySet.has(key)) continue
+      const val = `${
+        (attr as AttributeNode).value
+          ? (attr as AttributeNode).value?.content
+          : 'undefined'
+      }`
+      code = code + `   ${key}: ${val},\n`
+      keySet.add(key)
+    } else if (attr.type === 7) {
+      const arg = (attr as DirectiveNode).arg! as SimpleExpressionNode
+      const key = !arg.isStatic ? `[${arg.content}]` : `"${arg.content}"`
+      if (keySet.has(key)) continue
+      code =
+        code +
+        `   ${key}: ${
+          ((attr as DirectiveNode).exp! as SimpleExpressionNode).content
+        },\n`
+      keySet.add(key)
+    }
+  }
+  code = code + ' }'
+  return code
+}
+
+// TODO unit test
+
+/*
+const __sfc__ = {};
+import { openBlock as _openBlock, createElementBlock as _createElementBlock, defineCustomElement as _defineCustomElement } from "vue"
+function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("h1", null, " app "))
+}
+__sfc__.render = render
+__sfc__.__file = "src/App.vue"
+export default customElements.define(name, _defineCustomElement(constructor), options);
+*/
+
+// :id="{ id: msg3, 'other-attr': msg }"
+// id="{ id: msg3, 'other-attr': msg }"
+// .id="{ id: msg3, 'other-attr': msg }"
+// v-bind:src="msg2s"
+// v-bind:[msg]="msg2"
+// :[msg]="msg2"
+// :xlink:special="msg3"
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index 47bb7c083bb..e97d15b7a3d 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -184,27 +184,3 @@ export function genCssVarsCode(
 
   return `_${CSS_VARS_HELPER}(_ctx => (${transformedString}))`
 }
-
-// <script setup> already gets the calls injected as part of the transform
-// this is only for single normal <script>
-export function genNormalScriptCssVarsCode(
-  cssVars: string[],
-  bindings: BindingMetadata,
-  id: string,
-  isProd: boolean,
-  defaultVar: string,
-): string {
-  return (
-    `\nimport { ${CSS_VARS_HELPER} as _${CSS_VARS_HELPER} } from 'vue'\n` +
-    `const __injectCSSVars__ = () => {\n${genCssVarsCode(
-      cssVars,
-      bindings,
-      id,
-      isProd,
-    )}}\n` +
-    `const __setup__ = ${defaultVar}.setup\n` +
-    `${defaultVar}.setup = __setup__\n` +
-    `  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }\n` +
-    `  : __injectCSSVars__\n`
-  )
-}
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 238c718199d..98841ac22d3 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -354,6 +354,25 @@ export interface ComponentInternalInstance {
    * @internal
    */
   inheritAttrs?: boolean
+  /**
+   * custom element context,
+   * exists when the component is a child component of custom element
+   * @internal
+   */
+  ceContext: {
+    addCEChildStyle: (styles: string[], uid: number, hasAttr: boolean) => void
+    removeCEChildStyles: (uid: number) => void
+    setStyleAttrs: (
+      uid: number | 'root',
+      nAttrs: Array<Record<string, string | number>>,
+      oAttrs?: Array<Record<string, string | number>>,
+    ) => void
+  } | null
+  /**
+   * Whether the style tag has attribute tags
+   * @internal
+   */
+  hasStyleAttrs: boolean
   /**
    * is custom element?
    * @internal
@@ -363,7 +382,10 @@ export interface ComponentInternalInstance {
    * custom element specific HMR method
    * @internal
    */
-  ceReload?: (newStyles?: string[]) => void
+  ceReload?: (
+    newStyles?: string[],
+    attrs?: Array<Record<string, string | number>>,
+  ) => void
 
   // the rest are only for stateful components ---------------------------------
 
@@ -445,6 +467,7 @@ export interface ComponentInternalInstance {
   isMounted: boolean
   isUnmounted: boolean
   isDeactivated: boolean
+
   /**
    * @internal
    */
@@ -585,7 +608,6 @@ export function createComponentInstance(
 
     // inheritAttrs
     inheritAttrs: type.inheritAttrs,
-
     // state
     ctx: EMPTY_OBJ,
     data: EMPTY_OBJ,
@@ -607,6 +629,11 @@ export function createComponentInstance(
     isMounted: false,
     isUnmounted: false,
     isDeactivated: false,
+
+    ceContext:
+      parent && (parent.isCE || parent.ceContext) ? parent.ceContext : null,
+    hasStyleAttrs: false,
+
     bc: null,
     c: null,
     bm: null,
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index db674f987d8..9c34aad9bcb 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -16,6 +16,7 @@ import {
 import {
   type ComponentInternalInstance,
   type ComponentOptions,
+  type ConcreteComponent,
   type Data,
   type LifecycleHook,
   createComponentInstance,
@@ -701,6 +702,7 @@ function baseCreateRenderer(
     if (needCallTransitionHooks) {
       transition!.beforeEnter(el)
     }
+
     hostInsert(el, container, anchor)
     if (
       (vnodeHook = props && props.onVnodeMounted) ||
@@ -1336,6 +1338,31 @@ function baseCreateRenderer(
             startMeasure(instance, `render`)
           }
           const subTree = (instance.subTree = renderComponentRoot(instance))
+
+          // add style tag when the component is a child
+          // component of a custom element
+          if (instance && instance.parent) {
+            if (
+              !(
+                (instance.parent.type as ComponentOptions).__asyncLoader &&
+                instance.parent.isCE
+              )
+            ) {
+              const styles =
+                (instance.ceContext &&
+                  (instance.type as ConcreteComponent & { styles?: string[] })
+                    .styles) ||
+                null
+              if (instance.ceContext && styles) {
+                instance.ceContext.addCEChildStyle(
+                  styles,
+                  instance.uid,
+                  instance.hasStyleAttrs,
+                )
+              }
+            }
+          }
+
           if (__DEV__) {
             endMeasure(instance, `render`)
           }
@@ -2102,6 +2129,11 @@ function baseCreateRenderer(
     }
 
     if (shapeFlag & ShapeFlags.COMPONENT) {
+      // remove style tags when the component is a child
+      // component of a custom element
+      if (vnode.component!.ceContext && isHmrUpdating) {
+        vnode.component!.ceContext.removeCEChildStyles(vnode.component!.uid)
+      }
       unmountComponent(vnode.component!, parentSuspense, doRemove)
     } else {
       if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
@@ -2154,7 +2186,6 @@ function baseCreateRenderer(
         remove(vnode)
       }
     }
-
     if (
       (shouldInvokeVnodeHook &&
         (vnodeHook = props && props.onVnodeUnmounted)) ||
diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 62ba166b030..d410c9e59ae 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -1,4 +1,5 @@
 import {
+  type ComponentOptions,
   type Ref,
   type VueElement,
   createApp,
@@ -11,7 +12,9 @@ import {
   ref,
   render,
   renderSlot,
+  useCEStyleAttrs,
 } from '../src'
+import { expect } from 'vitest'
 
 describe('defineCustomElement', () => {
   const container = document.createElement('div')
@@ -625,6 +628,31 @@ describe('defineCustomElement', () => {
       const style = el.shadowRoot?.querySelector('style')!
       expect(style.textContent).toBe(`div { color: red; }`)
     })
+
+    test('child components in shadow dom should have styles', async () => {
+      const Child = {
+        styles: [`.Child { color: blue; }`],
+        render() {
+          return h('div', { class: 'Child' }, 'hello')
+        },
+      }
+      const Foo = defineCustomElement({
+        components: { Child },
+        styles: [`div { color: red; }`],
+        render() {
+          return h('div', {}, ['hello', h(Child)])
+        },
+      })
+      customElements.define('my-el-with-child-styles', Foo)
+      container.innerHTML = `<my-el-with-child-styles></my-el-with-child-styles>`
+      await nextTick()
+
+      const el = container.childNodes[0] as VueElement
+      const style = el.shadowRoot?.querySelectorAll('style')!
+      expect(style.length).toBe(2)
+      expect(style[0].textContent).toBe(`.Child { color: blue; }`)
+      expect(style[1].textContent).toBe(`div { color: red; }`)
+    })
   })
 
   describe('async', () => {
@@ -657,10 +685,10 @@ describe('defineCustomElement', () => {
 
       // should inject styles
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>hello</div>`,
+        `<style data-v-ce-root="">div { color: red }</style><div>hello</div>`,
       )
       expect(e2.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>world</div>`,
+        `<style data-v-ce-root="">div { color: red }</style><div>world</div>`,
       )
 
       // attr
@@ -668,7 +696,7 @@ describe('defineCustomElement', () => {
       await nextTick()
       expect((e1 as any).msg).toBe('attr')
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>attr</div>`,
+        `<style data-v-ce-root="">div { color: red }</style><div>attr</div>`,
       )
 
       // props
@@ -676,10 +704,80 @@ describe('defineCustomElement', () => {
       ;(e1 as any).msg = 'prop'
       expect(e1.getAttribute('msg')).toBe('prop')
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>prop</div>`,
+        `<style data-v-ce-root="">div { color: red }</style><div>prop</div>`,
       )
     })
 
+    test('child components in shadow dom should have styles & async', async () => {
+      const Child = {
+        styles: [`.Child { color: blue; }`],
+        render() {
+          return h('div', { class: 'Child' }, 'hello')
+        },
+      }
+      const Foo = defineCustomElement(
+        defineAsyncComponent(() => {
+          return Promise.resolve({
+            components: { Child },
+            styles: [`div { color: red; }`],
+            render() {
+              return h('div', {}, ['hello', h(Child)])
+            },
+          })
+        }),
+      )
+
+      customElements.define('my-el-with-child-styles-async', Foo)
+      container.innerHTML = `<my-el-with-child-styles-async></my-el-with-child-styles-async>`
+      await new Promise(r => setTimeout(r))
+
+      const el = container.childNodes[0] as VueElement
+      const style = el.shadowRoot?.querySelectorAll('style')!
+      expect(style.length).toBe(2)
+      expect(style[0].textContent).toBe(`.Child { color: blue; }`)
+      expect(style[1].textContent).toBe(`div { color: red; }`)
+    })
+
+    test('child components in shadow dom should have styles & async & descendants', async () => {
+      const Child2 = defineAsyncComponent(() => {
+        return Promise.resolve({
+          styles: [`.Child2 { color: pink; }`],
+          render() {
+            return h('div', { class: 'Child2' }, 'pink')
+          },
+        } as ComponentOptions)
+      })
+
+      const Child = defineAsyncComponent(() => {
+        return Promise.resolve({
+          components: { Child2 },
+          styles: [`.Child { color: blue; }`],
+          render() {
+            return h('div', { class: 'Child' }, ['hello', h(Child2)])
+          },
+        } as ComponentOptions)
+      })
+      const Parent = {
+        components: { Child },
+        styles: [`div { color: red; }`],
+        render() {
+          return h('div', {}, ['hello', h(Child)])
+        },
+      }
+      const Foo = defineCustomElement(Parent)
+
+      customElements.define('my-el-with-child-styles-async-descendants', Foo)
+      container.innerHTML = `<my-el-with-child-styles-async-descendants></my-el-with-child-styles-async-descendants>`
+      await new Promise(r => setTimeout(r))
+
+      const el = container.childNodes[0] as VueElement
+      const style = el.shadowRoot?.querySelectorAll('style')!
+      expect(style.length).toBe(3)
+      expect(style[0].textContent).toBe(`.Child2 { color: pink; }`)
+      expect(style[1].textContent).toBe(`.Child { color: blue; }`)
+      expect(style[2].textContent).toBe(`div { color: red; }`)
+    })
+
     test('set DOM property before resolve', async () => {
       const E = defineCustomElement(
         defineAsyncComponent(() => {
@@ -772,4 +870,177 @@ describe('defineCustomElement', () => {
       )
     })
   })
+
+  describe('child components styles', () => {
+    test('Components are used multiple times without adding duplicate styles', async () => {
+      const Child = {
+        styles: [`.my-green { color: green; }`],
+        render() {
+          return h('p', { class: 'my-green' }, 'This should be green')
+        },
+      }
+
+      const Foo = defineCustomElement({
+        components: { Child },
+        styles: [`.my-red { color: red; }`],
+        render() {
+          return [
+            h('p', { class: 'my-red' }, 'This should be red'),
+            h(Child),
+            h(Child),
+            h(Child),
+          ]
+        },
+      })
+      customElements.define('my-el-with-multiple-child', Foo)
+      container.innerHTML = `<my-el-with-multiple-child></my-el-with-multiple-child><my-el-with-multiple-child></my-el-with-multiple-child>`
+      await nextTick()
+
+      const el1 = container.childNodes[0] as VueElement
+      const style = el1.shadowRoot?.querySelectorAll('style')!
+      expect(style.length).toBe(2)
+      expect(style[0].textContent).toBe(`.my-green { color: green; }`)
+      expect(style[1].textContent).toBe(`.my-red { color: red; }`)
+
+      const el2 = container.childNodes[1] as VueElement
+      const style2 = el2.shadowRoot?.querySelectorAll('style')!
+      expect(style2.length).toBe(2)
+      expect(style2[0].textContent).toBe(`.my-green { color: green; }`)
+      expect(style2[1].textContent).toBe(`.my-red { color: red; }`)
+    })
+
+    test('Component with style attribute used multiple times', async () => {
+      const Child = {
+        styles: [`.my-green { color: green; }`],
+        setup() {
+          const id = 'foo'
+          useCEStyleAttrs(() => {
+            return [
+              {
+                id: id,
+              },
+            ] as Record<string, string | number>[]
+          })
+        },
+        render() {
+          return h('p', { class: 'my-green' }, 'This should be green')
+        },
+      }
+
+      const Foo = defineCustomElement({
+        components: { Child },
+        styles: [`.my-red { color: red; }`],
+        render() {
+          return [
+            h('p', { class: 'my-red' }, 'This should be red'),
+            h(Child),
+            h(Child),
+            h(Child),
+          ]
+        },
+      })
+      customElements.define('my-el-with-multiple-attr', Foo)
+      container.innerHTML = `<my-el-with-multiple-attr></my-el-with-multiple-attr><my-el-with-multiple-attr></my-el-with-multiple-attr>`
+      await nextTick()
+
+      const el1 = container.childNodes[0] as VueElement
+      const style = el1.shadowRoot?.querySelectorAll('style')!
+      expect(style.length).toBe(4)
+      expect(style[0].textContent).toBe(`.my-green { color: green; }`)
+      expect(style[1].textContent).toBe(`.my-green { color: green; }`)
+      expect(style[2].textContent).toBe(`.my-green { color: green; }`)
+      expect(style[3].textContent).toBe(`.my-red { color: red; }`)
+
+      const el2 = container.childNodes[1] as VueElement
+      const style2 = el2.shadowRoot?.querySelectorAll('style')!
+      expect(style2.length).toBe(4)
+      expect(style2[0].textContent).toBe(`.my-green { color: green; }`)
+      expect(style2[1].textContent).toBe(`.my-green { color: green; }`)
+      expect(style2[2].textContent).toBe(`.my-green { color: green; }`)
+      expect(style2[3].textContent).toBe(`.my-red { color: red; }`)
+    })
+
+    test('nested child components w/ fragments in shadow dom should have styles', async () => {
+      const GrandChild = {
+        styles: [`.my-green { color: green; }`],
+        render() {
+          return h('p', { class: 'my-green' }, 'This should be green')
+        },
+      }
+      const Child = {
+        components: { GrandChild },
+        styles: [`.my-blue { color: blue; }`],
+        render() {
+          return h('div', {}, [
+            h('p', { class: 'my-blue' }, 'This should be blue'),
+            h('div', {}, h(GrandChild)),
+          ])
+        },
+      }
+      const Foo = defineCustomElement({
+        components: { Child },
+        styles: [`.my-red { color: red; }`],
+        render() {
+          return [h('p', { class: 'my-red' }, 'This should be red'), h(Child)]
+        },
+      })
+      customElements.define('my-el-with-grandchild-styles', Foo)
+      container.innerHTML = `<my-el-with-grandchild-styles></my-el-with-grandchild-styles>`
+      await nextTick()
+
+      const el = container.childNodes[0] as VueElement
+      const style = el.shadowRoot?.querySelectorAll('style')!
+      expect(style.length).toBe(3)
+      expect(style[0].textContent).toBe(`.my-green { color: green; }`)
+      expect(style[1].textContent).toBe(`.my-blue { color: blue; }`)
+      expect(style[2].textContent).toBe(`.my-red { color: red; }`)
+    })
+
+    test('deeply nested child components w/ fragments in shadow dom should have styles', async () => {
+      const GreatGrandChild = {
+        styles: [`.my-grey { color: grey; }`],
+        render() {
+          return h('p', { class: 'my-grey' }, 'This should be grey')
+        },
+      }
+      const GrandChild = {
+        components: { GreatGrandChild },
+        styles: [`.my-green { color: green; }`],
+        render() {
+          return [
+            h('p', { class: 'my-green' }, 'This should be green'),
+            h('span', {}, h(GreatGrandChild)),
+          ]
+        },
+      }
+      const Child = {
+        components: { GrandChild },
+        styles: [`.my-blue { color: blue; }`],
+        render() {
+          return h('div', {}, [
+            h('p', { class: 'my-blue' }, 'This should be blue'),
+            h('div', {}, h(GrandChild)),
+          ])
+        },
+      }
+      const Foo = defineCustomElement({
+        components: { Child },
+        styles: [`.my-red { color: red; }`],
+        render() {
+          return [h('p', { class: 'my-red' }, 'This should be red'), h(Child)]
+        },
+      })
+      customElements.define('my-el-with-greatgrandchild-styles', Foo)
+      container.innerHTML = `<my-el-with-greatgrandchild-styles></my-el-with-greatgrandchild-styles>`
+      await nextTick()
+
+      const el = container.childNodes[0] as VueElement
+      const style = el.shadowRoot?.querySelectorAll('style')!
+      expect(style.length).toBe(4)
+      expect(style[0].textContent).toBe(`.my-grey { color: grey; }`)
+      expect(style[1].textContent).toBe(`.my-green { color: green; }`)
+      expect(style[2].textContent).toBe(`.my-blue { color: blue; }`)
+      expect(style[3].textContent).toBe(`.my-red { color: red; }`)
+    })
+  })
 })
diff --git a/packages/runtime-dom/__tests__/helpers/useCEStyleAttrs.spec.ts b/packages/runtime-dom/__tests__/helpers/useCEStyleAttrs.spec.ts
new file mode 100644
index 00000000000..e305d551345
--- /dev/null
+++ b/packages/runtime-dom/__tests__/helpers/useCEStyleAttrs.spec.ts
@@ -0,0 +1,372 @@
+import {
+  Suspense,
+  type VueElement,
+  defineCustomElement,
+  h,
+  nextTick,
+  ref,
+  useCEStyleAttrs,
+} from '@vue/runtime-dom'
+import { expect } from 'vitest'
+
+describe('useCEStyleAttrs', () => {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+
+  beforeEach(() => {
+    container.innerHTML = ''
+  })
+
+  test('useCEStyleAttrs should work in custom element', async () => {
+    const Foo = defineCustomElement({
+      styles: [`.my-red { color: red; }`],
+      setup() {
+        const attr = ref('foo')
+        useCEStyleAttrs(() => {
+          return [
+            {
+              id: attr.value,
+              src: attr.value,
+              [attr.value]: attr.value,
+              'xlink:special': attr.value,
+            },
+          ] as Record<string, string | number>[]
+        })
+      },
+      render() {
+        return [h('p', { class: 'my-red' }, 'This should be red')]
+      },
+    })
+    customElements.define('ce-style-attr', Foo)
+    container.innerHTML = `<ce-style-attr></ce-style-attr>`
+    await nextTick()
+
+    const el1 = container.childNodes[0] as VueElement
+    const style = el1.shadowRoot?.querySelectorAll('style')!
+    expect(style.length).toBe(1)
+    expect(style[0].textContent).toBe(`.my-red { color: red; }`)
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo" src="foo" foo="foo" xlink:special="foo"',
+      ),
+    ).toBeTruthy()
+  })
+
+  test('useCEStyleAttrs should work in child components of custom element', async () => {
+    const Child = {
+      styles: [`.my-green { color: green; }`],
+      setup() {
+        const attr = ref('foo')
+        useCEStyleAttrs(() => {
+          return [
+            {
+              id: attr.value,
+              src: attr.value,
+              [attr.value]: attr.value,
+              'xlink:special': attr.value,
+            },
+          ] as Record<string, string | number>[]
+        })
+      },
+      render() {
+        return h('p', { class: 'my-green' }, 'This should be green')
+      },
+    }
+
+    const Foo = defineCustomElement({
+      components: { Child },
+      styles: [`.my-red { color: red; }`],
+      setup() {
+        const attr = ref('foo2')
+        useCEStyleAttrs(() => {
+          return [
+            {
+              id: attr.value,
+              src: attr.value,
+              [attr.value]: attr.value,
+              'xlink:special': attr.value,
+            },
+          ] as Record<string, string | number>[]
+        })
+      },
+      render() {
+        return [h('p', { class: 'my-red' }, 'This should be red'), h(Child)]
+      },
+    })
+    customElements.define('ce-style-attr-child', Foo)
+    container.innerHTML = `<ce-style-attr-child></ce-style-attr-child>`
+    await nextTick()
+
+    const el1 = container.childNodes[0] as VueElement
+    const style = el1.shadowRoot?.querySelectorAll('style')!
+    expect(style.length).toBe(2)
+    expect(style[0].textContent).toBe(`.my-green { color: green; }`)
+    expect(style[1].textContent).toBe(`.my-red { color: red; }`)
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo" src="foo" foo="foo" xlink:special="foo"',
+      ),
+    ).toBeTruthy()
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo2" src="foo2" foo2="foo2" xlink:special="foo2"',
+      ),
+    ).toBeTruthy()
+  })
+
+  test('useCEStyleAttrs The order of adding attributes should be consistent with the order of styles', async () => {
+    const Foo = defineCustomElement({
+      styles: [`.my-red { color: red; }`, `.my-green { color: green; }`],
+      setup() {
+        const attr = ref('foo')
+        const attr2 = ref('foo2')
+        useCEStyleAttrs(() => {
+          return [
+            {
+              id: attr.value,
+            },
+            {
+              id: attr2.value,
+            },
+          ] as Record<string, string | number>[]
+        })
+      },
+      render() {
+        return [h('p', { class: 'my-red' }, 'This should be red')]
+      },
+    })
+    customElements.define('ce-style-attr-child-order', Foo)
+    container.innerHTML = `<ce-style-attr-child-order></ce-style-attr-child-order>`
+    await nextTick()
+
+    const el1 = container.childNodes[0] as VueElement
+    const style = el1.shadowRoot?.querySelectorAll('style')!
+    expect(style.length).toBe(2)
+
+    const styleRed = el1.shadowRoot?.querySelector('[id="foo"]')
+    expect(styleRed).toBeTruthy()
+    expect(styleRed?.textContent).toBe(`.my-red { color: red; }`)
+
+    const styleGreen = el1.shadowRoot?.querySelector('[id="foo2"]')
+    expect(styleGreen).toBeTruthy()
+    expect(styleGreen?.textContent).toBe(`.my-green { color: green; }`)
+  })
+
+  test('useCEStyleAttrs should be updated', async () => {
+    const attr = ref('foo')
+    const attr2 = ref('foo2')
+    const Child = {
+      styles: [`.my-green { color: green; }`],
+      setup() {
+        useCEStyleAttrs(() => {
+          return [
+            {
+              id: attr2.value,
+              src: attr2.value,
+              [attr2.value]: attr2.value,
+              'xlink:special': attr2.value,
+            },
+          ] as Record<string, string | number>[]
+        })
+      },
+      render() {
+        return h('p', { class: 'my-green' }, 'This should be green')
+      },
+    }
+
+    const Foo = defineCustomElement({
+      components: { Child },
+      styles: [`.my-red { color: red; }`],
+      setup() {
+        useCEStyleAttrs(() => {
+          return [
+            {
+              id: attr.value,
+              src: attr.value,
+              [attr.value]: attr.value,
+              'xlink:special': attr.value,
+            },
+          ] as Record<string, string | number>[]
+        })
+      },
+      render() {
+        return [h('p', { class: 'my-red' }, 'This should be red'), h(Child)]
+      },
+    })
+    customElements.define('ce-style-attr-child-update', Foo)
+    container.innerHTML = `<ce-style-attr-child-update></ce-style-attr-child-update>`
+    await nextTick()
+
+    const el1 = container.childNodes[0] as VueElement
+    const style = el1.shadowRoot?.querySelectorAll('style')!
+    expect(style.length).toBe(2)
+    expect(style[0].textContent).toBe(`.my-green { color: green; }`)
+    expect(style[1].textContent).toBe(`.my-red { color: red; }`)
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo" src="foo" foo="foo" xlink:special="foo"',
+      ),
+    ).toBeTruthy()
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo2" src="foo2" foo2="foo2" xlink:special="foo2"',
+      ),
+    ).toBeTruthy()
+
+    attr.value = 'foo-change'
+    attr2.value = 'foo2-change'
+    await nextTick()
+
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo-change" src="foo-change" xlink:special="foo-change" foo-change="foo-change"',
+      ),
+    ).toBeTruthy()
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo2-change" src="foo2-change" xlink:special="foo2-change" foo2-change="foo2-change"',
+      ),
+    ).toBeTruthy()
+  })
+
+  test('on fragment root', async () => {
+    const Foo = defineCustomElement({
+      styles: [`.my-red { color: red; }`],
+      setup() {
+        const attr = ref('foo')
+        useCEStyleAttrs(() => {
+          return [
+            {
+              id: attr.value,
+              src: attr.value,
+              [attr.value]: attr.value,
+              'xlink:special': attr.value,
+            },
+          ] as Record<string, string | number>[]
+        })
+      },
+      render() {
+        return [
+          h('p', { class: 'my-red' }, 'This should be red'),
+          h('p', { class: 'my-red' }, 'This should be red'),
+        ]
+      },
+    })
+    customElements.define('ce-style-attr-fragment', Foo)
+    container.innerHTML = `<ce-style-attr-fragment></ce-style-attr-fragment>`
+    await nextTick()
+
+    const el1 = container.childNodes[0] as VueElement
+    const style = el1.shadowRoot?.querySelectorAll('style')!
+    expect(style.length).toBe(1)
+    expect(style[0].textContent).toBe(`.my-red { color: red; }`)
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo" src="foo" foo="foo" xlink:special="foo"',
+      ),
+    ).toBeTruthy()
+  })
+
+  test('on suspense root', async () => {
+    const attr = ref('foo')
+    const attr2 = ref('foo2')
+
+    let resolveAsync: any
+    let asyncPromise: any
+
+    const AsyncComp = {
+      styles: [`.my-green { color: green; }`],
+      setup() {
+        useCEStyleAttrs(() => {
+          return [
+            {
+              id: attr2.value,
+              src: attr2.value,
+              [attr2.value]: attr2.value,
+              'xlink:special': attr2.value,
+            },
+          ] as Record<string, string | number>[]
+        })
+        asyncPromise = new Promise(r => {
+          resolveAsync = () => {
+            r(() => h('p', 'default'))
+          }
+        })
+        return asyncPromise
+      },
+    }
+
+    const App = {
+      styles: [`.my-red { color: red; }`],
+      setup() {
+        useCEStyleAttrs(() => {
+          return [
+            {
+              id: attr.value,
+              src: attr.value,
+              [attr.value]: attr.value,
+              'xlink:special': attr.value,
+            },
+          ] as Record<string, string | number>[]
+        })
+        return () =>
+          h(Suspense, null, {
+            default: h(AsyncComp),
+            fallback: h('div', 'fallback'),
+          })
+      },
+    }
+
+    customElements.define(
+      'ce-style-attr-child-suspense',
+      defineCustomElement(App),
+    )
+    container.innerHTML = `<ce-style-attr-child-suspense></ce-style-attr-child-suspense>`
+    await nextTick()
+
+    const el1 = container.childNodes[0] as VueElement
+    let style = el1.shadowRoot?.querySelectorAll('style')!
+    expect(style.length).toBe(1)
+    expect(style[0].textContent).toBe(`.my-red { color: red; }`)
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo" src="foo" foo="foo" xlink:special="foo"',
+      ),
+    ).toBeTruthy()
+
+    resolveAsync()
+    await asyncPromise.then(() => {})
+    // Suspense effects flush
+    await nextTick()
+
+    style = el1.shadowRoot?.querySelectorAll('style')!
+    expect(style.length).toBe(2)
+    expect(style[0].textContent).toBe(`.my-green { color: green; }`)
+    expect(style[1].textContent).toBe(`.my-red { color: red; }`)
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo" src="foo" foo="foo" xlink:special="foo"',
+      ),
+    ).toBeTruthy()
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo2" src="foo2" foo2="foo2" xlink:special="foo2"',
+      ),
+    ).toBeTruthy()
+
+    attr.value = 'foo-change'
+    attr2.value = 'foo2-change'
+    await nextTick()
+
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo-change" src="foo-change" xlink:special="foo-change" foo-change="foo-change"',
+      ),
+    ).toBeTruthy()
+    expect(
+      el1.shadowRoot?.innerHTML.includes(
+        'id="foo2-change" src="foo2-change" xlink:special="foo2-change" foo2-change="foo2-change"',
+      ),
+    ).toBeTruthy()
+  })
+})
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 2a96cafa0ea..66c63528ace 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -193,6 +193,8 @@ export class VueElement extends BaseClass {
   private _numberProps: Record<string, true> | null = null
   private _styles?: HTMLStyleElement[]
   private _ob?: MutationObserver | null = null
+  private _childStylesAnchor?: HTMLStyleElement
+  private _childStylesSet: Set<string> = new Set<string>()
   constructor(
     private _def: InnerComponentDef,
     private _props: Record<string, any> = {},
@@ -379,14 +381,21 @@ export class VueElement extends BaseClass {
       vnode.ce = instance => {
         this._instance = instance
         instance.isCE = true
+
+        instance.ceContext = {
+          addCEChildStyle: this._addChildStyles.bind(this),
+          removeCEChildStyles: this._removeChildStyles.bind(this),
+          setStyleAttrs: this._setStyleAttrs.bind(this),
+        }
         // HMR
         if (__DEV__) {
-          instance.ceReload = newStyles => {
+          instance.ceReload = (newStyles?: string[] | undefined) => {
             // always reset styles
             if (this._styles) {
               this._styles.forEach(s => this.shadowRoot!.removeChild(s))
               this._styles.length = 0
             }
+            this._childStylesSet.clear()
             this._applyStyles(newStyles)
             this._instance = null
             this._update()
@@ -430,10 +439,47 @@ export class VueElement extends BaseClass {
 
   private _applyStyles(styles: string[] | undefined) {
     if (styles) {
-      styles.forEach(css => {
+      styles.forEach((css, index) => {
         const s = document.createElement('style')
         s.textContent = css
+        s.setAttribute(`data-v-ce-root`, '')
         this.shadowRoot!.appendChild(s)
+        this._childStylesAnchor = s
+        // record for HMR
+        if (__DEV__) {
+          ;(this._styles || (this._styles = [])).push(s)
+        }
+      })
+    }
+  }
+
+  // The method used by custom element child components
+  // to add styles to the shadow dom
+  protected _addChildStyles(
+    styles: string[] | undefined,
+    uid: number,
+    hasAttr: boolean,
+  ) {
+    if (styles) {
+      // record style
+      const isRepeated = this.isHasChildStyle(styles)
+      if (isRepeated && !hasAttr) return
+
+      styles.forEach((css, index) => {
+        const s = document.createElement('style')
+        s.textContent = css
+
+        // set id for useCEStyleAttrs
+        s.setAttribute(`data-v-ce-${uid}`, '')
+
+        if (this._childStylesAnchor) {
+          this.shadowRoot!.insertBefore(s, this._childStylesAnchor as Node)
+        } else {
+          this.shadowRoot!.appendChild(s)
+        }
+        // update anchor
+        this._childStylesAnchor = s
+
         // record for HMR
         if (__DEV__) {
           ;(this._styles || (this._styles = [])).push(s)
@@ -441,4 +487,57 @@ export class VueElement extends BaseClass {
       })
     }
   }
+
+  protected _setStyleAttrs(
+    uid: number | 'root',
+    nAttrs: Array<Record<string, string | number>>,
+    oAttrs?: Array<Record<string, string | number>>,
+  ) {
+    const styleEls = this.shadowRoot!.querySelectorAll(`[data-v-ce-${uid}]`)
+    styleEls.forEach((s, index) => {
+      if (oAttrs && oAttrs[index]) {
+        for (const key in oAttrs[index]) {
+          if (
+            nAttrs[index] &&
+            !nAttrs[index].hasOwnProperty(nAttrs[index][key])
+          ) {
+            s.removeAttribute((oAttrs[index][key] || '').toString())
+          }
+        }
+      }
+
+      for (const key in nAttrs[index]) {
+        s.setAttribute(key, (nAttrs[index][key] || '').toString())
+      }
+    })
+  }
+
+  protected _removeChildStyles(uid: number) {
+    // remove style tag and _childStylesSet(for HMR)
+    if (__DEV__) {
+      const styleList = this.shadowRoot!.querySelectorAll(`[data-v-ce-${uid}]`)
+      let oldStyleContentList: string[] = []
+      styleList.length > 0 &&
+        styleList.forEach(s => {
+          oldStyleContentList.unshift(s.innerHTML as string)
+          this.shadowRoot!.removeChild(s)
+          // update anchor
+          const anchor = this.shadowRoot!.querySelectorAll('style')
+          this._childStylesAnchor =
+            anchor.length > 0 ? anchor[anchor.length - 1] : undefined
+        })
+      this._childStylesSet.delete(oldStyleContentList.join())
+    }
+  }
+
+  protected isHasChildStyle(styles: string[] | undefined) {
+    if (styles) {
+      const styleContent = styles.join()
+      if (this._childStylesSet.has(styleContent)) {
+        return true
+      }
+      this._childStylesSet.add(styleContent)
+      return false
+    }
+  }
 }
diff --git a/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts b/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts
new file mode 100644
index 00000000000..1077e59bfaf
--- /dev/null
+++ b/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts
@@ -0,0 +1,32 @@
+import { getCurrentInstance, warn, watchPostEffect } from '@vue/runtime-core'
+
+export function useCEStyleAttrs(
+  getter: (ctx: any) => Array<Record<string, string | number>>,
+) {
+  if (!__BROWSER__ && !__TEST__) return
+
+  const instance = getCurrentInstance()
+  /* istanbul ignore next */
+  if (!instance) {
+    __DEV__ &&
+      warn(
+        `useCEStyleAttrs is called without current active component instance.`,
+      )
+    return
+  }
+
+  instance.hasStyleAttrs = true
+  let oAttrs: undefined | Array<Record<string, string | number>> = undefined
+  const setAttrs = () => {
+    const attrs = getter(instance.proxy)
+    if (instance.ceContext) {
+      if (instance.isCE) {
+        instance.ceContext.setStyleAttrs('root', attrs, oAttrs)
+      } else {
+        instance.ceContext.setStyleAttrs(instance.uid, attrs, oAttrs)
+      }
+      oAttrs = attrs
+    }
+  }
+  watchPostEffect(setAttrs)
+}
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index 44ada3d935f..473a513a279 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -227,6 +227,9 @@ export {
 export { useCssModule } from './helpers/useCssModule'
 export { useCssVars } from './helpers/useCssVars'
 
+// CE utilities
+export { useCEStyleAttrs } from './helpers/useCEStyleAttrs'
+
 // DOM-only components
 export { Transition, type TransitionProps } from './components/Transition'
 export {