diff --git a/.gitignore b/.gitignore
index 74af0e3..fe18269 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,8 @@
 # Project exclude paths
 /build/node_modules/
 /node_modules/
-/packages/core/node_modules/
-/packages/v-model/node_modules/
-/play/v-model/node_modules/
+/packages/**/node_modules/
+/play/**/node_modules/
 /play/node_modules/
 /utils/node_modules/
-dist
\ No newline at end of file
+dist
diff --git a/build/dir.ts b/build/dir.ts
index e296ff3..78c1789 100644
--- a/build/dir.ts
+++ b/build/dir.ts
@@ -1,10 +1,12 @@
 export const entry = {
-  'v-model': '../packages/v-model/index.ts', // @unplugin-vue-ce/vModel
+  'sub-style': '../packages/sub-style/index.ts', // @unplugin-vue-ce/sub-style
+  'v-model': '../packages/v-model/index.ts', // @unplugin-vue-ce/v-model
   'utils': '../utils/index.ts', // @unplugin-vue-ce/utils
-  'index': '../packages/core/index.ts', // @unplugin-vue-ce
+  'index': '../packages/core/index.ts', // unplugin-vue-ce
 }
 
 export const entryPkg = {
   'v-model': '../packages/v-model',
+  'sub-style': '../packages/sub-style',
   'utils': '../utils',
 }
diff --git a/build/index.ts b/build/index.ts
index 7767b6c..235f270 100644
--- a/build/index.ts
+++ b/build/index.ts
@@ -30,7 +30,7 @@ if (buildMode === 'prod') {
     const config = JSON.parse(JSON.stringify(baseConfig))
     config.entry = [entry[entryKey]]
     // config.outDir = entry[entryKey]
-    config.external = [/@baiwusanyu/]
+    config.external = [/@unplugin-vue-ce/]
     config.outDir = entryKey === 'index'
       ? path.resolve(process.cwd(), '../dist') : path.resolve(process.cwd(), `../dist/${entryKey}`)
     config.dts = true
@@ -50,7 +50,7 @@ if (buildMode === 'dev') {
     config.dts = false
     config.minify = false
     config.watch = ['../packages/**/**.ts']
-    config.noExternal = [/@baiwusanyu/]
+    config.noExternal = [/@unplugin-vue-ce/]
     configOptions.push(config)
   }
 }
diff --git a/build/publish.ts b/build/publish.ts
index d570272..1314d84 100644
--- a/build/publish.ts
+++ b/build/publish.ts
@@ -4,5 +4,6 @@ import { runTask } from './utils'
 export default series(
   runTask('publish @unplugin-vue-ce/utils', 'cd dist/utils && pnpm run publish:npm'),
   runTask('publish @unplugin-vue-ce/v-model', 'cd dist/v-model && pnpm run publish:npm'),
+  runTask('publish @unplugin-vue-ce/sub-style', 'cd dist/sub-style && pnpm run publish:npm'),
   runTask('publish unplugin-vue-ce', 'cd dist && pnpm run publish:npm'),
 )
diff --git a/package.json b/package.json
index d2863d6..3d11804 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "lint:fix": "eslint --fix ./ --ext .vue,.js,.ts,.jsx,.tsx,.json ",
     "dev": "pnpm run --filter @unplugin-vue-ce/build dev",
     "dev:v-model": "pnpm run --filter @unplugin-vue-ce/play-v-model dev",
+    "dev:sub-style": "pnpm run --filter @unplugin-vue-ce/play-sub-style dev",
     "build": "pnpm run --filter @unplugin-vue-ce/build build",
     "release": "bumpp package.json packages/*/package.json utils/package.json --commit --push --tag",
     "publish:npm": "pnpm publish --no-git-checks --access public",
@@ -69,6 +70,7 @@
     "vue": "^3.3.2"
   },
   "dependencies": {
+    "@unplugin-vue-ce/sub-style": "workspace:*",
     "@unplugin-vue-ce/utils": "workspace:*",
     "@unplugin-vue-ce/v-model": "workspace:*",
     "ansi-colors": "^4.1.3",
diff --git a/packages/core/index.ts b/packages/core/index.ts
index 3a8c218..30e4819 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -1,10 +1,11 @@
 import { unVueCEVModel } from '@unplugin-vue-ce/v-model'
+import { unVueCESubStyle } from '@unplugin-vue-ce/sub-style'
 import { createUnplugin } from 'unplugin'
-import type { Options } from '@unplugin-vue-ce/v-model/types'
-const unplugin = createUnplugin<Options>(() => {
-  return {
-    ...unVueCEVModel(),
-  }
+const unplugin = createUnplugin(() => {
+  return [
+    unVueCEVModel(),
+    unVueCESubStyle(),
+  ]
 })
 export const viteVueCE = unplugin.vite
 export const rollupVueCE = unplugin.rollup
diff --git a/packages/sub-style/README.md b/packages/sub-style/README.md
new file mode 100644
index 0000000..147e630
--- /dev/null
+++ b/packages/sub-style/README.md
@@ -0,0 +1,94 @@
+# @unplugin-vue-ce/sub-style
+
+## Install
+
+```bash
+npm i @unplugin-vue-ce/sub-style
+```
+or
+```bash
+yarn add @unplugin-vue-ce/sub-style
+```
+or
+```bash
+pnpm add @unplugin-vue-ce/sub-style
+```
+
+## Usage
+<details>
+<summary>Vite</summary>
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { viteVueCESubStyle } from '@unplugin-vue-ce/sub-style'
+import vue from '@vitejs/plugin-vue'
+import type { PluginOption } from 'vite'
+export default defineConfig({
+  plugins: [
+    vue(),
+    viteVueCESubStyle() as PluginOption,
+  ],
+})
+```
+
+</details>
+<br>
+<details>
+<summary>Rollup</summary>
+
+```ts
+// rollup.config.js
+import { rollupVueCESubStyle } from '@unplugin-vue-ce/sub-style'
+export default {
+  plugins: [
+    rollupVueCESubStyle(),
+  ],
+}
+```
+
+</details>
+<br>
+<details>
+<summary>Webpack</summary>
+
+```ts
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [
+    require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle(),
+  ],
+}
+```
+</details>
+<br>
+<details>
+<summary>Vue CLI</summary>
+
+```ts
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle({}),
+    ],
+  },
+}
+```
+
+</details>
+<br>
+<details>
+<summary>ESBuild</summary>
+
+```ts
+// esbuild.config.js
+import { build } from 'esbuild'
+import { esbuildVueCESubStyle } from '@unplugin-vue-ce/sub-style'
+
+build({
+  plugins: [esbuildVueCESubStyle()],
+})
+```
+</details>
\ No newline at end of file
diff --git a/packages/sub-style/index.ts b/packages/sub-style/index.ts
new file mode 100644
index 0000000..8afb265
--- /dev/null
+++ b/packages/sub-style/index.ts
@@ -0,0 +1,44 @@
+import { createUnplugin } from 'unplugin'
+import { setGlobalPrefix } from 'baiwusanyu-utils'
+import MagicString from 'magic-string'
+import { NAME } from '@unplugin-vue-ce/utils'
+import { injectVueRuntime } from './src/inject-vue-runtime'
+
+export const unVueCESubStyle = (): any => {
+  setGlobalPrefix(`[${NAME}]:`)
+  return {
+    name: `${NAME}:sub-style`,
+    enforce: 'post',
+    async transform(code: string, id: string) {
+      const mgcStr = new MagicString(code)
+
+      // build only
+      if (id.includes('@vue/runtime-dom/dist/runtime-dom.esm-bundler.js'))
+        injectVueRuntime(mgcStr)
+
+      // build only
+      if (id.includes('@vue/runtime-core/dist/runtime-core.esm-bundler.js'))
+        injectVueRuntime(mgcStr)
+
+      // dev only
+      if (id.includes('.vite/deps/vue.js'))
+        injectVueRuntime(mgcStr)
+
+      return {
+        code: mgcStr.toString(),
+        get map() {
+          return mgcStr.generateMap({
+            source: id,
+            includeContent: true,
+            hires: true,
+          })
+        },
+      }
+    },
+  }
+}
+const unplugin = createUnplugin(unVueCESubStyle)
+export const viteVueCESubStyle = unplugin.vite
+export const rollupVueCESubStyle = unplugin.rollup
+export const webpackVueCESubStyle = unplugin.webpack
+export const esbuildVueCESubStyle = unplugin.esbuild
diff --git a/packages/sub-style/package.json b/packages/sub-style/package.json
new file mode 100644
index 0000000..e5ab908
--- /dev/null
+++ b/packages/sub-style/package.json
@@ -0,0 +1,72 @@
+{
+  "name": "@unplugin-vue-ce/sub-style",
+  "description": "A vue plugin that extends vue's Custom Element capabilities (sub component style)",
+  "private": false,
+  "type": "module",
+  "version": "0.0.3-beta.2",
+  "packageManager": "pnpm@6.32.4",
+  "keywords": [
+    "typescript",
+    "javascript",
+    "utils",
+    "vue",
+    "vue3",
+    "vite",
+    "react",
+    "web component"
+  ],
+  "license": "MIT",
+  "author": "baiwusanyu-c",
+  "homepage": "https://github.com/baiwusanyu-c",
+  "repository": "https://github.com/baiwusanyu-c/unplugin-vue-ce",
+  "bugs": "https://github.com/baiwusanyu-c/unplugin-vue-ce/issues",
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.js",
+      "require": "./index.cjs",
+      "import": "./index.ts"
+    }
+  },
+  "files": [
+    "index.js",
+    "index.cjs",
+    "index.d.ts",
+    "README.md"
+  ],
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./*",
+        "./index.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "publish:npm": "pnpm publish --no-git-checks --access public"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "baiwusanyu-utils": "^1.0.8",
+    "estree-walker-ts": "^1.0.0",
+    "fast-glob": "^3.2.12",
+    "fs-extra": "^11.1.1",
+    "magic-string": "^0.30.0",
+    "unplugin": "^1.3.1",
+    "vue": "^3.3.2"
+  },
+  "dependencies": {
+    "@unplugin-vue-ce/utils": "workspace:*",
+    "baiwusanyu-utils": "^1.0.12",
+    "estree-walker-ts": "^1.0.0",
+    "fast-glob": "^3.2.12",
+    "fs-extra": "^11.1.1",
+    "magic-string": "^0.30.0",
+    "unplugin": "^1.3.1",
+    "vue": "^3.3.2"
+  }
+}
diff --git a/packages/sub-style/src/inject-api-custom-element.ts b/packages/sub-style/src/inject-api-custom-element.ts
new file mode 100644
index 0000000..2d22601
--- /dev/null
+++ b/packages/sub-style/src/inject-api-custom-element.ts
@@ -0,0 +1,115 @@
+import type { MagicStringBase } from 'magic-string-ast'
+import type {
+  CallExpression,
+  ClassDeclaration,
+  ClassMethod,
+  Identifier,
+  MemberExpression,
+  VariableDeclarator,
+} from '@babel/types'
+
+const _childStylesAnchor = '\n    this._childStylesAnchor = null;'
+
+const injectBindFnContent
+  = 'instance.addCEChildStyle = this._addChildStyles.bind(this);\n'
+  + '        instance.removeCEChildStyle = this._removeChildStyles.bind(this);\n        '
+
+const injectAddAndRemoveStyle = '  _addChildStyles( styles, instance ) {\n'
+  + '    if (styles) {\n'
+  // eslint-disable-next-line no-template-curly-in-string
+  + '      const ceStyleId = `data-v-ce-${instance.uid}`;\n'
+  + '      styles.forEach((css, index) => {\n'
+  + '        const s = document.createElement(\'style\');\n'
+  + '        s.textContent = css;\n'
+  + '        (instance.cecStyleIds || (instance.cecStyleIds = new Set())).add(\n'
+  + '          ceStyleId\n'
+  + '        );\n'
+  + '        s.setAttribute(ceStyleId, \'\');\n'
+  + '\n'
+  + '        if (this._childStylesAnchor) {\n'
+  + '          this.shadowRoot.insertBefore(\n'
+  + '            s,\n'
+  + '            this._childStylesAnchor.nextSibling\n'
+  + '          );\n'
+  + '        } else {\n'
+  + '          this.shadowRoot.appendChild(s);\n'
+  + '        }\n'
+  + '        // update anchor\n'
+  + '        this._childStylesAnchor = s;\n'
+  + '\n'
+  + '        // record for HMR\n'
+  + '        {\n'
+  + '          ;(this._styles || (this._styles = [])).push(s)\n'
+  + '        }\n'
+  + '      })\n'
+  + '    }\n'
+  + '  }\n'
+  + '\n'
+  + '  _removeChildStyles(cecStyleIds) {\n'
+  + '    if (cecStyleIds) {\n'
+  + '      cecStyleIds.forEach(id => {\n'
+  // eslint-disable-next-line no-template-curly-in-string
+  + '        const sList = this.shadowRoot.querySelectorAll(`[${id}]`);\n'
+  + '        sList.length > 0 && sList.forEach(s => this.shadowRoot.removeChild(s));\n'
+  + '      });\n'
+  + '      const archor = this.shadowRoot.querySelectorAll(\'style\');\n'
+  + '      this._childStylesAnchor =\n'
+  + '        archor.length > 0 ? archor[archor.length - 1] : undefined;\n'
+  + '    }\n'
+  + '  }\n'
+
+const injectApplyStyles = '\n    this._childStylesAnchor = s;'
+
+let isVueElementIdentifier = false
+let isBaseClassIdentifier = false
+let isApplyStylesIdentifier = false
+export function injectApiCustomElement(
+  mgcStr: MagicStringBase,
+  node: Identifier | CallExpression | MemberExpression,
+  parent: VariableDeclarator | CallExpression | ClassDeclaration | ClassMethod,
+) {
+  if (node.type === 'Identifier'
+    && node.name === 'VueElement'
+    && parent.type === 'ClassDeclaration')
+    isVueElementIdentifier = true
+
+  if (node.type === 'Identifier'
+    && node.name === 'BaseClass'
+    && isVueElementIdentifier)
+    isBaseClassIdentifier = true
+
+  if (node.type === 'CallExpression'
+    && isVueElementIdentifier
+    && isBaseClassIdentifier
+    && node.callee.type === 'Super')
+    mgcStr.prependRight(node.end! + 1, _childStylesAnchor)
+
+  if (node.type === 'MemberExpression'
+    && isVueElementIdentifier
+    && isBaseClassIdentifier
+    && (node.object as Identifier).name === 'instance'
+    && (node.property as Identifier).name === 'isCE')
+    mgcStr.prependLeft(node.start!, injectBindFnContent)
+
+  if (node.type === 'Identifier'
+    && node.name === '_applyStyles'
+    && parent.type === 'ClassMethod'
+    && isVueElementIdentifier
+    && isBaseClassIdentifier) {
+    isApplyStylesIdentifier = true
+    mgcStr.prependLeft(parent.end! + 1, injectAddAndRemoveStyle)
+  }
+
+  if (isApplyStylesIdentifier
+    && isVueElementIdentifier
+    && isBaseClassIdentifier
+    && node.type === 'CallExpression'
+    && node.callee.type === 'MemberExpression'
+    && (node.callee.property as Identifier).name === 'appendChild'
+    && ((node.callee.object as MemberExpression).property as Identifier).name === 'shadowRoot') {
+    isApplyStylesIdentifier = false
+    isVueElementIdentifier = false
+    isBaseClassIdentifier = false
+    mgcStr.prependRight(node.end! + 1, injectApplyStyles)
+  }
+}
diff --git a/packages/sub-style/src/inject-component.ts b/packages/sub-style/src/inject-component.ts
new file mode 100644
index 0000000..dc50b24
--- /dev/null
+++ b/packages/sub-style/src/inject-component.ts
@@ -0,0 +1,34 @@
+import type { FunctionDeclaration, Identifier, ObjectExpression } from '@babel/types'
+import type { MagicStringBase } from 'magic-string-ast'
+
+let isCreateComponentInstance = false
+let VariableDeclarationInst = false
+const injectToCompContent = '\n    isCEChild: parent && (parent.isCE || parent.isCEChild),\n'
+    + '    addCEChildStyle:\n'
+    + '      parent && parent.addCEChildStyle ? parent.addCEChildStyle : null,\n'
+    + '    removeCEChildStyle:\n'
+    + '      parent && parent.removeCEChildStyle ? parent.removeCEChildStyle : null,\n'
+    + '    cecStyleIds: null,'
+export function injectToComponent(
+  mgcStr: MagicStringBase,
+  node: Identifier | ObjectExpression,
+  parent: FunctionDeclaration,
+) {
+  if (node.type === 'Identifier'
+      && parent.type === 'FunctionDeclaration'
+      && node.name === 'createComponentInstance')
+    isCreateComponentInstance = true
+
+  if (isCreateComponentInstance
+        && node.type === 'Identifier'
+        && node.name === 'instance')
+    VariableDeclarationInst = true
+
+  if (isCreateComponentInstance
+        && VariableDeclarationInst
+        && node.type === 'ObjectExpression') {
+    isCreateComponentInstance = false
+    VariableDeclarationInst = false
+    mgcStr.prependRight(node.start! + 1, injectToCompContent)
+  }
+}
diff --git a/packages/sub-style/src/inject-render.ts b/packages/sub-style/src/inject-render.ts
new file mode 100644
index 0000000..5484830
--- /dev/null
+++ b/packages/sub-style/src/inject-render.ts
@@ -0,0 +1,61 @@
+import type { MagicStringBase } from 'magic-string-ast'
+import type {
+  CallExpression,
+  Identifier,
+  ObjectExpression,
+  VariableDeclarator,
+} from '@babel/types'
+
+const injectToUnMountContent = '\n'
+  + '      if (\n'
+  + '        vnode.component.isCEChild &&\n'
+  + '        vnode.component.cecStyleIds &&\n'
+  + '        vnode.component.removeCEChildStyle\n'
+  + '      ) {\n'
+  + '        vnode.component.removeCEChildStyle(vnode.component.cecStyleIds);\n'
+  + '        vnode.component.cecStyleIds = null;\n'
+  + '      }\n'
+
+const injectToBaseCreateRendererContent = '\n'
+  + '         if (\n'
+  + '            instance &&\n'
+  + '            !(\n'
+  + '              instance.parent &&\n'
+  + '              (instance.parent.type).__asyncLoader\n'
+  + '            )\n'
+  + '          ) {\n'
+  + '            const styles = (instance.isCEChild && instance.type.styles) || null;\n'
+  + '            if (instance.addCEChildStyle && styles) {\n'
+  + '              instance.addCEChildStyle(styles, instance)\n'
+  + '            }\n'
+  + '          }\n'
+
+let isComponentUpdateFnIdentifier = false
+let isUnmountIdentifier = false
+export function injectToRenderer(
+  mgcStr: MagicStringBase,
+  node: Identifier | ObjectExpression,
+  parent: VariableDeclarator | CallExpression,
+) {
+  if (node.type === 'Identifier' && node.name === 'componentUpdateFn')
+    isComponentUpdateFnIdentifier = true
+
+  if (isComponentUpdateFnIdentifier
+    && parent.type === 'VariableDeclarator'
+    && node.type === 'Identifier'
+    && node.name === 'subTree') {
+    isComponentUpdateFnIdentifier = false
+    mgcStr.prependRight(parent.end! + 1, injectToBaseCreateRendererContent)
+  }
+
+  if (node.type === 'Identifier' && node.name === 'unmount')
+    isUnmountIdentifier = true
+
+  if (isUnmountIdentifier
+    && parent.type === 'CallExpression'
+    && node.type === 'Identifier'
+    && node.name === 'unmountComponent') {
+    isUnmountIdentifier = false
+    mgcStr.prependLeft(parent.start! - 1, injectToUnMountContent)
+  }
+}
diff --git a/packages/sub-style/src/inject-vue-runtime.ts b/packages/sub-style/src/inject-vue-runtime.ts
new file mode 100644
index 0000000..861278e
--- /dev/null
+++ b/packages/sub-style/src/inject-vue-runtime.ts
@@ -0,0 +1,48 @@
+import { walk } from 'estree-walker-ts'
+import { parse as babelParse } from '@babel/parser'
+import { injectToComponent } from './inject-component'
+import { injectToRenderer } from './inject-render'
+import { injectApiCustomElement } from './inject-api-custom-element'
+import type {
+  BlockStatement,
+  CallExpression,
+  FunctionDeclaration,
+  Identifier,
+  ObjectExpression,
+  VariableDeclarator,
+} from '@babel/types'
+import type { MagicStringBase } from 'magic-string-ast'
+export function injectVueRuntime(
+  mgcStr: MagicStringBase,
+) {
+  const ast = babelParse(mgcStr.toString(), {
+    sourceType: 'module',
+    plugins: ['typescript'],
+  })
+
+  ;(walk as any)(ast, {
+    enter(
+      node: Identifier | CallExpression | BlockStatement,
+      parent: FunctionDeclaration | VariableDeclarator | CallExpression,
+    ) {
+      // inject code to component instance
+      injectToComponent(
+        mgcStr,
+        node as Identifier | ObjectExpression,
+        parent as FunctionDeclaration,
+      )
+      // inject code to render
+      injectToRenderer(
+        mgcStr,
+        node as Identifier | ObjectExpression,
+        parent as VariableDeclarator | CallExpression,
+      )
+      // inject code to apiCustomElement
+      injectApiCustomElement(
+        mgcStr,
+        node as Identifier | CallExpression,
+        parent as VariableDeclarator | CallExpression,
+      )
+    },
+  })
+}
diff --git a/packages/v-model/index.ts b/packages/v-model/index.ts
index 85a03d7..d2dbb53 100644
--- a/packages/v-model/index.ts
+++ b/packages/v-model/index.ts
@@ -1,10 +1,9 @@
 import { createUnplugin } from 'unplugin'
 import { setGlobalPrefix } from 'baiwusanyu-utils'
 import MagicString from 'magic-string'
+import { NAME } from '@unplugin-vue-ce/utils'
 import { injectIsCEModifiers } from './src/inject-vue-shared'
 import { injectVueRuntime } from './src/inject-vue-runtime'
-import type { Options } from './types'
-const NAME = 'unplugin-vue-ce'
 export const unVueCEVModel = (): any => {
   setGlobalPrefix(`[${NAME}]:`)
   return {
@@ -45,7 +44,7 @@ export const unVueCEVModel = (): any => {
     },
   }
 }
-const unplugin = createUnplugin<Options>(unVueCEVModel)
+const unplugin = createUnplugin(unVueCEVModel)
 export const viteVueCEVModel = unplugin.vite
 export const rollupVueCEVModel = unplugin.rollup
 export const webpackVueCEVModel = unplugin.webpack
diff --git a/packages/v-model/src/option/index.ts b/packages/v-model/src/option/index.ts
deleted file mode 100644
index 15a772c..0000000
--- a/packages/v-model/src/option/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { extend } from 'baiwusanyu-utils'
-import { DEFAULT_EXCLUDE_REG, DEFAULT_INCLUDE_REG } from '@unplugin-vue-ce/utils'
-import type { Options } from '../../types'
-
-const defaultOption: Options = {
-  include: DEFAULT_INCLUDE_REG,
-  exclude: DEFAULT_EXCLUDE_REG,
-}
-
-export function initOption(option: Options) {
-  option = extend(defaultOption, option)
-  return option
-}
diff --git a/packages/v-model/types.ts b/packages/v-model/types.ts
deleted file mode 100644
index d2e80ed..0000000
--- a/packages/v-model/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { FilterPattern } from '@rollup/pluginutils'
-
-export interface Options {
-  /**
-   * RegExp or glob to match files to be transformed
-   */
-  include?: FilterPattern
-
-  /**
-   * RegExp or glob to match files to NOT be transformed
-   */
-  exclude?: FilterPattern
-}
diff --git a/play/sub-style/index.html b/play/sub-style/index.html
new file mode 100644
index 0000000..07f5569
--- /dev/null
+++ b/play/sub-style/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <vue-app></vue-app>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/play/sub-style/package.json b/play/sub-style/package.json
new file mode 100644
index 0000000..6beb10b
--- /dev/null
+++ b/play/sub-style/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@unplugin-vue-ce/play-sub-style",
+  "private": true,
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
diff --git a/play/sub-style/src/App.vue b/play/sub-style/src/App.vue
new file mode 100644
index 0000000..208ee53
--- /dev/null
+++ b/play/sub-style/src/App.vue
@@ -0,0 +1,4 @@
+
+<template>
+  <bwsy-ce-foo />
+</template>
diff --git a/play/sub-style/src/bwsy-bar.vue b/play/sub-style/src/bwsy-bar.vue
new file mode 100644
index 0000000..0f8bdb4
--- /dev/null
+++ b/play/sub-style/src/bwsy-bar.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <p class="bar">
+      should be blue -- bar
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.bar {
+  color: blue;
+}
+</style>
diff --git a/play/sub-style/src/bwsy-ce-foo.ce.vue b/play/sub-style/src/bwsy-ce-foo.ce.vue
new file mode 100644
index 0000000..d5305ae
--- /dev/null
+++ b/play/sub-style/src/bwsy-ce-foo.ce.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <p class="foo">
+      should be red -- foo
+    </p>
+    <BwsyBar />
+  </div>
+</template>
+
+<script setup>
+import BwsyBar from './bwsy-bar.vue'
+</script>
+
+<style scoped>
+.foo {
+  color: red;
+}
+</style>
diff --git a/play/sub-style/src/deep/Child.vue b/play/sub-style/src/deep/Child.vue
new file mode 100644
index 0000000..bbda3f6
--- /dev/null
+++ b/play/sub-style/src/deep/Child.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import GrandChild from './GrandChild.vue'
+const color = ref('redblue')
+const show = ref(true)
+</script>
+
+<template>
+  <div>
+    <p class="my-blue" @click="color = 'blue'">
+      This should be blue
+    </p>
+    <GrandChild v-if="show" />
+    <div v-else>
+      test
+    </div>
+  </div>
+</template>
+
+<style>
+.my-blue { color: v-bind(color) }
+</style>
diff --git a/play/sub-style/src/deep/Foo.ce.vue b/play/sub-style/src/deep/Foo.ce.vue
new file mode 100644
index 0000000..e025866
--- /dev/null
+++ b/play/sub-style/src/deep/Foo.ce.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Child from './Child.vue'
+</script>
+
+<template>
+  <p class="my-red">
+    This should be red
+  </p>
+
+  <Child />
+</template>
+
+<style scoped>
+.my-red { color: red; }
+</style>
diff --git a/play/sub-style/src/deep/GrandChild.vue b/play/sub-style/src/deep/GrandChild.vue
new file mode 100644
index 0000000..c3a6bad
--- /dev/null
+++ b/play/sub-style/src/deep/GrandChild.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import GreatGrandChild from './GreatGrandChild.vue'
+</script>
+
+<template>
+  <p class="my-green">
+    This should be green
+  </p>
+  <span><GreatGrandChild /></span>
+</template>
+
+<style scoped>
+.my-green { color: green; }
+</style>
diff --git a/play/sub-style/src/deep/GreatGrandChild.vue b/play/sub-style/src/deep/GreatGrandChild.vue
new file mode 100644
index 0000000..b24baf7
--- /dev/null
+++ b/play/sub-style/src/deep/GreatGrandChild.vue
@@ -0,0 +1,13 @@
+
+<template>
+  <p class="my-grey">
+    This should be grey
+  </p>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.my-grey { color: grey; }
+</style>
diff --git a/play/sub-style/src/deep/adwd.vue b/play/sub-style/src/deep/adwd.vue
new file mode 100644
index 0000000..8037e69
--- /dev/null
+++ b/play/sub-style/src/deep/adwd.vue
@@ -0,0 +1,10 @@
+
+<template>
+  <p class="my-green">
+    This should be green
+  </p>
+</template>
+
+<style scoped>
+.my-green { color: green; }
+</style>
diff --git a/play/sub-style/src/main.ts b/play/sub-style/src/main.ts
new file mode 100644
index 0000000..390f060
--- /dev/null
+++ b/play/sub-style/src/main.ts
@@ -0,0 +1,46 @@
+/* import {
+  createApp,
+  defineCustomElement,
+} from '../patches/vue.esm-browser.js'; */
+
+import {
+  defineCustomElement,
+} from 'vue'
+
+/* import App from './App.vue';
+import Foo from './bwsy-ce-foo.ce.vue';
+const app = createApp(App);
+customElements.define('bwsy-ce-foo', defineCustomElement(Foo));
+/!*app.config.compilerOptions.isCustomElement = (tag=>{
+    return tag === 'bwsy-ce-foo'
+})*!/
+app.mount('#app'); */
+
+/* import App from './nested/vue-app.ce.vue'
+const app = createApp(App);
+
+const ceApp = defineCustomElement(App);
+customElements.define('vue-app', ceApp);
+app.config.compilerOptions.isCustomElement = (tag) => {
+  return tag === 'vue-app';
+}; */
+
+// import App from './nested/vue-app.ce.vue'
+/* import App from './deep/Foo.ce.vue'
+const app = createApp(App);
+
+const ceApp = defineCustomElement(App);
+customElements.define('vue-app', ceApp);
+app.config.compilerOptions.isCustomElement = (tag) => {
+  return tag === 'vue-app';
+}; */
+
+import App from './scoped/my-component.vue'
+// const app = createApp(App);
+
+const ceApp = defineCustomElement(App)
+customElements.define('vue-app', ceApp)
+/*
+app.config.compilerOptions.isCustomElement = (tag) => {
+  return tag === 'vue-app';
+}; */
diff --git a/play/sub-style/src/nested/bar.vue b/play/sub-style/src/nested/bar.vue
new file mode 100644
index 0000000..97de3f3
--- /dev/null
+++ b/play/sub-style/src/nested/bar.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <p class="bar">
+      should be blue -- bar
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.bar {
+    color: blue;
+}
+</style>
diff --git a/play/sub-style/src/nested/baz.vue b/play/sub-style/src/nested/baz.vue
new file mode 100644
index 0000000..5ebf059
--- /dev/null
+++ b/play/sub-style/src/nested/baz.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <p class="baz">
+      should be green -- baz
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.baz {
+    color: green;
+}
+</style>
diff --git a/play/sub-style/src/nested/foo.vue b/play/sub-style/src/nested/foo.vue
new file mode 100644
index 0000000..34ebec7
--- /dev/null
+++ b/play/sub-style/src/nested/foo.vue
@@ -0,0 +1,20 @@
+<script setup>
+import Bar from './bar.vue'
+import Baz from './baz.vue'
+</script>
+
+<template>
+  <div>
+    <p class="foo">
+      should be red -- foo
+    </p>
+    <Bar />
+    <Baz />
+  </div>
+</template>
+
+<style scoped>
+.foo {
+    color: red;
+}
+</style>
diff --git a/play/sub-style/src/nested/vue-app.ce.vue b/play/sub-style/src/nested/vue-app.ce.vue
new file mode 100644
index 0000000..2e4aac3
--- /dev/null
+++ b/play/sub-style/src/nested/vue-app.ce.vue
@@ -0,0 +1,7 @@
+<script setup>
+import Foo from './foo.vue'
+</script>
+
+<template>
+  <Foo />
+</template>
diff --git a/play/sub-style/src/scoped/CEorNotCE.vue b/play/sub-style/src/scoped/CEorNotCE.vue
new file mode 100644
index 0000000..e1d0cdb
--- /dev/null
+++ b/play/sub-style/src/scoped/CEorNotCE.vue
@@ -0,0 +1,41 @@
+<script>
+import InNestedCE from './InNestedCE.vue'
+
+export default {
+  components: { InNestedCE },
+  props: {
+    isInCE: {
+      type: Boolean,
+      default: true,
+    },
+  },
+}
+</script>
+
+<template>
+  --- is in nested CE: {{ isInCE }}
+  <p
+    class="my-red"
+    v-text="
+      isInCE
+        ? 'This should be blue (scoped .my-red in nested shadow root)'
+        : 'This should be blue (scoped .my-red should overwrite root .my-red)'
+    "
+  />
+  <p
+    class="my-blue"
+    v-text="
+      isInCE
+        ? 'This should NOT be blue (not inherited)'
+        : 'This should also be blue (inherited)'
+    "
+  />
+  <InNestedCE />
+</template>
+
+<!-- This scoped style is more specific than the .my-red from the root -->
+<style scoped>
+.my-red {
+    color: blue;
+}
+</style>
diff --git a/play/sub-style/src/scoped/InNestedCE.vue b/play/sub-style/src/scoped/InNestedCE.vue
new file mode 100644
index 0000000..c851ffa
--- /dev/null
+++ b/play/sub-style/src/scoped/InNestedCE.vue
@@ -0,0 +1,14 @@
+
+<template>
+  <p
+    class="my-red"
+    v-text="'should  be green and style in the sub shadow root'"
+  />
+</template>
+
+<!-- This scoped style is more specific than the .my-red from the root -->
+<style scoped>
+.my-red {
+    color: green;
+}
+</style>
diff --git a/play/sub-style/src/scoped/OtherComponent.vue b/play/sub-style/src/scoped/OtherComponent.vue
new file mode 100644
index 0000000..5760ca3
--- /dev/null
+++ b/play/sub-style/src/scoped/OtherComponent.vue
@@ -0,0 +1,23 @@
+<script setup>
+import { defineCustomElement } from 'vue'
+import YetAnotherComponent from './YetAnotherComponent.vue'
+import CEorNotCE from './CEorNotCE.vue'
+
+// import { defineCustomElement } from 'vue';
+
+customElements.define('nested-ce', defineCustomElement(CEorNotCE))
+</script>
+
+<template>
+  <p class="my-blue">
+    This should be blue
+  </p>
+  <YetAnotherComponent />
+  <nested-ce />
+</template>
+
+<style>
+.my-blue {
+    color: blue;
+}
+</style>
diff --git a/play/sub-style/src/scoped/YetAnotherComponent.vue b/play/sub-style/src/scoped/YetAnotherComponent.vue
new file mode 100644
index 0000000..f53fff0
--- /dev/null
+++ b/play/sub-style/src/scoped/YetAnotherComponent.vue
@@ -0,0 +1,16 @@
+<script setup>
+import CEorNotCE from './CEorNotCE.vue'
+</script>
+
+<template>
+  <p class="my-green">
+    This should be green
+  </p>
+  <CEorNotCE :is-in-c-e="false" />
+</template>
+
+<style scoped>
+.my-green {
+    color: green;
+}
+</style>
diff --git a/play/sub-style/src/scoped/my-component.vue b/play/sub-style/src/scoped/my-component.vue
new file mode 100644
index 0000000..5cc7d62
--- /dev/null
+++ b/play/sub-style/src/scoped/my-component.vue
@@ -0,0 +1,18 @@
+<script setup>
+import OtherComponent from './OtherComponent.vue'
+</script>
+
+<template>
+  <p class="my-red">
+    This should be red
+  </p>
+  <div>
+    <OtherComponent />
+  </div>
+</template>
+
+<style>
+.my-red {
+    color: red;
+}
+</style>
diff --git a/play/sub-style/src/vite-env.d.ts b/play/sub-style/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/play/sub-style/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/play/sub-style/tsconfig.json b/play/sub-style/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/play/sub-style/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/play/sub-style/vite.config.ts b/play/sub-style/vite.config.ts
new file mode 100644
index 0000000..e6b16ce
--- /dev/null
+++ b/play/sub-style/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { viteVueCE } from '../../dist'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue({
+      customElement: true,
+    }),
+    viteVueCE(),
+  ],
+  build: {
+    minify: false,
+  },
+})
diff --git a/play/v-model/node_modules/.bin/tsc b/play/v-model/node_modules/.bin/tsc
deleted file mode 100644
index a5b9034..0000000
--- a/play/v-model/node_modules/.bin/tsc
+++ /dev/null
@@ -1,17 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="$NODE_PATH:/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" "$@"
-else
-  exec node  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" "$@"
-fi
diff --git a/play/v-model/node_modules/.bin/tsc.CMD b/play/v-model/node_modules/.bin/tsc.CMD
deleted file mode 100644
index ca8367b..0000000
--- a/play/v-model/node_modules/.bin/tsc.CMD
+++ /dev/null
@@ -1,12 +0,0 @@
-@SETLOCAL
-@IF NOT DEFINED NODE_PATH (
-  @SET "NODE_PATH=D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules"
-) ELSE (
-  @SET "NODE_PATH=%NODE_PATH%;D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules"
-)
-@IF EXIST "%~dp0\node.exe" (
-  "%~dp0\node.exe"  "%~dp0\..\..\..\..\node_modules\.pnpm\typescript@5.0.4\node_modules\typescript\bin\tsc" %*
-) ELSE (
-  @SET PATHEXT=%PATHEXT:;.JS;=;%
-  node  "%~dp0\..\..\..\..\node_modules\.pnpm\typescript@5.0.4\node_modules\typescript\bin\tsc" %*
-)
diff --git a/play/v-model/node_modules/.bin/tsc.ps1 b/play/v-model/node_modules/.bin/tsc.ps1
deleted file mode 100644
index 42381f4..0000000
--- a/play/v-model/node_modules/.bin/tsc.ps1
+++ /dev/null
@@ -1,41 +0,0 @@
-#!/usr/bin/env pwsh
-$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
-
-$exe=""
-$pathsep=":"
-$env_node_path=$env:NODE_PATH
-$new_node_path="D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules"
-if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
-  # Fix case when both the Windows and Linux builds of Node
-  # are installed in the same directory
-  $exe=".exe"
-  $pathsep=";"
-} else {
-  $new_node_path="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules"
-}
-if ([string]::IsNullOrEmpty($env_node_path)) {
-  $env:NODE_PATH=$new_node_path
-} else {
-  $env:NODE_PATH="$env_node_path$pathsep$new_node_path"
-}
-
-$ret=0
-if (Test-Path "$basedir/node$exe") {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "$basedir/node$exe"  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" $args
-  } else {
-    & "$basedir/node$exe"  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" $args
-  }
-  $ret=$LASTEXITCODE
-} else {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "node$exe"  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" $args
-  } else {
-    & "node$exe"  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" $args
-  }
-  $ret=$LASTEXITCODE
-}
-$env:NODE_PATH=$env_node_path
-exit $ret
diff --git a/play/v-model/node_modules/.bin/tsserver b/play/v-model/node_modules/.bin/tsserver
deleted file mode 100644
index 7c36596..0000000
--- a/play/v-model/node_modules/.bin/tsserver
+++ /dev/null
@@ -1,17 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="$NODE_PATH:/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" "$@"
-else
-  exec node  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" "$@"
-fi
diff --git a/play/v-model/node_modules/.bin/tsserver.CMD b/play/v-model/node_modules/.bin/tsserver.CMD
deleted file mode 100644
index faef55d..0000000
--- a/play/v-model/node_modules/.bin/tsserver.CMD
+++ /dev/null
@@ -1,12 +0,0 @@
-@SETLOCAL
-@IF NOT DEFINED NODE_PATH (
-  @SET "NODE_PATH=D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules"
-) ELSE (
-  @SET "NODE_PATH=%NODE_PATH%;D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules"
-)
-@IF EXIST "%~dp0\node.exe" (
-  "%~dp0\node.exe"  "%~dp0\..\..\..\..\node_modules\.pnpm\typescript@5.0.4\node_modules\typescript\bin\tsserver" %*
-) ELSE (
-  @SET PATHEXT=%PATHEXT:;.JS;=;%
-  node  "%~dp0\..\..\..\..\node_modules\.pnpm\typescript@5.0.4\node_modules\typescript\bin\tsserver" %*
-)
diff --git a/play/v-model/node_modules/.bin/tsserver.ps1 b/play/v-model/node_modules/.bin/tsserver.ps1
deleted file mode 100644
index c8716f9..0000000
--- a/play/v-model/node_modules/.bin/tsserver.ps1
+++ /dev/null
@@ -1,41 +0,0 @@
-#!/usr/bin/env pwsh
-$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
-
-$exe=""
-$pathsep=":"
-$env_node_path=$env:NODE_PATH
-$new_node_path="D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules"
-if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
-  # Fix case when both the Windows and Linux builds of Node
-  # are installed in the same directory
-  $exe=".exe"
-  $pathsep=";"
-} else {
-  $new_node_path="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules"
-}
-if ([string]::IsNullOrEmpty($env_node_path)) {
-  $env:NODE_PATH=$new_node_path
-} else {
-  $env:NODE_PATH="$env_node_path$pathsep$new_node_path"
-}
-
-$ret=0
-if (Test-Path "$basedir/node$exe") {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "$basedir/node$exe"  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" $args
-  } else {
-    & "$basedir/node$exe"  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" $args
-  }
-  $ret=$LASTEXITCODE
-} else {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "node$exe"  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" $args
-  } else {
-    & "node$exe"  "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" $args
-  }
-  $ret=$LASTEXITCODE
-}
-$env:NODE_PATH=$env_node_path
-exit $ret
diff --git a/play/v-model/node_modules/.bin/vite b/play/v-model/node_modules/.bin/vite
deleted file mode 100644
index 580d781..0000000
--- a/play/v-model/node_modules/.bin/vite
+++ /dev/null
@@ -1,17 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="$NODE_PATH:/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" "$@"
-else
-  exec node  "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" "$@"
-fi
diff --git a/play/v-model/node_modules/.bin/vite.CMD b/play/v-model/node_modules/.bin/vite.CMD
deleted file mode 100644
index 8afbcdf..0000000
--- a/play/v-model/node_modules/.bin/vite.CMD
+++ /dev/null
@@ -1,12 +0,0 @@
-@SETLOCAL
-@IF NOT DEFINED NODE_PATH (
-  @SET "NODE_PATH=D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules"
-) ELSE (
-  @SET "NODE_PATH=%NODE_PATH%;D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules"
-)
-@IF EXIST "%~dp0\node.exe" (
-  "%~dp0\node.exe"  "%~dp0\..\..\..\..\node_modules\.pnpm\vite@4.3.5\node_modules\vite\bin\vite.js" %*
-) ELSE (
-  @SET PATHEXT=%PATHEXT:;.JS;=;%
-  node  "%~dp0\..\..\..\..\node_modules\.pnpm\vite@4.3.5\node_modules\vite\bin\vite.js" %*
-)
diff --git a/play/v-model/node_modules/.bin/vite.ps1 b/play/v-model/node_modules/.bin/vite.ps1
deleted file mode 100644
index 47f38d8..0000000
--- a/play/v-model/node_modules/.bin/vite.ps1
+++ /dev/null
@@ -1,41 +0,0 @@
-#!/usr/bin/env pwsh
-$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
-
-$exe=""
-$pathsep=":"
-$env_node_path=$env:NODE_PATH
-$new_node_path="D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules"
-if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
-  # Fix case when both the Windows and Linux builds of Node
-  # are installed in the same directory
-  $exe=".exe"
-  $pathsep=";"
-} else {
-  $new_node_path="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules"
-}
-if ([string]::IsNullOrEmpty($env_node_path)) {
-  $env:NODE_PATH=$new_node_path
-} else {
-  $env:NODE_PATH="$env_node_path$pathsep$new_node_path"
-}
-
-$ret=0
-if (Test-Path "$basedir/node$exe") {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "$basedir/node$exe"  "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" $args
-  } else {
-    & "$basedir/node$exe"  "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" $args
-  }
-  $ret=$LASTEXITCODE
-} else {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "node$exe"  "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" $args
-  } else {
-    & "node$exe"  "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" $args
-  }
-  $ret=$LASTEXITCODE
-}
-$env:NODE_PATH=$env_node_path
-exit $ret
diff --git a/play/v-model/node_modules/.vite/deps/package.json b/play/v-model/node_modules/.vite/deps/package.json
deleted file mode 100644
index 3dbc1ca..0000000
--- a/play/v-model/node_modules/.vite/deps/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "type": "module"
-}
diff --git a/play/v-model/vite.config.ts b/play/v-model/vite.config.ts
index d9ef58d..e6b16ce 100644
--- a/play/v-model/vite.config.ts
+++ b/play/v-model/vite.config.ts
@@ -1,13 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { viteVueCEVModel } from '../../dist'
+import { viteVueCE } from '../../dist'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue({
       customElement: true,
     }),
-    viteVueCEVModel(),
+    viteVueCE(),
   ],
   build: {
     minify: false,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a56368..5b290b9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,9 @@ importers:
 
   .:
     dependencies:
+      '@unplugin-vue-ce/sub-style':
+        specifier: workspace:*
+        version: link:packages/sub-style
       '@unplugin-vue-ce/utils':
         specifier: workspace:*
         version: link:utils
@@ -62,6 +65,12 @@ importers:
       '@types/node':
         specifier: ^20.1.3
         version: 20.1.3
+      '@unplugin-vue-ce/play-sub-style':
+        specifier: workspace:*
+        version: link:play/sub-style
+      '@unplugin-vue-ce/play-v-model':
+        specifier: workspace:*
+        version: link:play/v-model
       '@vitejs/plugin-vue':
         specifier: ^4.2.2
         version: 4.2.2(vite@4.3.5)(vue@3.3.2)
@@ -134,6 +143,33 @@ importers:
 
   build: {}
 
+  packages/sub-style:
+    dependencies:
+      '@unplugin-vue-ce/utils':
+        specifier: workspace:*
+        version: link:../../utils
+      baiwusanyu-utils:
+        specifier: ^1.0.12
+        version: 1.0.12(ansi-colors@4.1.3)(hash-sum@2.0.0)(moment@2.29.4)
+      estree-walker-ts:
+        specifier: ^1.0.0
+        version: 1.0.0
+      fast-glob:
+        specifier: ^3.2.12
+        version: 3.2.12
+      fs-extra:
+        specifier: ^11.1.1
+        version: 11.1.1
+      magic-string:
+        specifier: ^0.30.0
+        version: 0.30.0
+      unplugin:
+        specifier: ^1.3.1
+        version: 1.3.1
+      vue:
+        specifier: ^3.3.2
+        version: 3.3.2
+
   packages/v-model:
     dependencies:
       '@unplugin-vue-ce/utils':
@@ -161,6 +197,8 @@ importers:
         specifier: ^3.3.2
         version: 3.3.2
 
+  play/sub-style: {}
+
   play/v-model: {}
 
   utils:
diff --git a/utils/constant.ts b/utils/constant.ts
index 14e1fb4..45b2810 100644
--- a/utils/constant.ts
+++ b/utils/constant.ts
@@ -1,2 +1 @@
-export const DEFAULT_INCLUDE_REG = [/\.vue$/]
-export const DEFAULT_EXCLUDE_REG = [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.dist[\\/]/, /\.html$/]
+export const NAME = 'unplugin-vue-ce'