diff --git a/src/components/BootstrapBlazor.Vditor/BootstrapBlazor.Vditor.csproj b/src/components/BootstrapBlazor.Vditor/BootstrapBlazor.Vditor.csproj
index 19017c17..6735bf75 100644
--- a/src/components/BootstrapBlazor.Vditor/BootstrapBlazor.Vditor.csproj
+++ b/src/components/BootstrapBlazor.Vditor/BootstrapBlazor.Vditor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.1</Version>
+    <Version>10.0.2</Version>
   </PropertyGroup>
   
   <PropertyGroup>
diff --git a/src/components/BootstrapBlazor.Vditor/Vditor.razor b/src/components/BootstrapBlazor.Vditor/Vditor.razor
index 041dbfd6..6e85c6e1 100644
--- a/src/components/BootstrapBlazor.Vditor/Vditor.razor
+++ b/src/components/BootstrapBlazor.Vditor/Vditor.razor
@@ -6,4 +6,6 @@
 {
     <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
-<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id"></div>
+<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
+    <div class="bb-vditor-container"></div>
+</div>
diff --git a/src/components/BootstrapBlazor.Vditor/Vditor.razor.js b/src/components/BootstrapBlazor.Vditor/Vditor.razor.js
index 8fb860dc..c9563b09 100644
--- a/src/components/BootstrapBlazor.Vditor/Vditor.razor.js
+++ b/src/components/BootstrapBlazor.Vditor/Vditor.razor.js
@@ -1,4 +1,4 @@
-import { addLink, addScript } from '../BootstrapBlazor/modules/utility.js';
+import { addLink, addScript } from '../BootstrapBlazor/modules/utility.js';
 import Data from '../BootstrapBlazor/modules/data.js';
 
 export async function init(id, invoke, options) {
@@ -10,8 +10,9 @@ export async function init(id, invoke, options) {
     await addLink('./_content/BootstrapBlazor.Vditor/css/vditor.css');
     await addScript('./_content/BootstrapBlazor.Vditor/js/vditor.js');
 
+    const root = el.querySelector('.bb-vditor-container');
     const { options: op, value } = options;
-    const vditor = new Vditor(id, getOptions(invoke, { ...op, value }));
+    const vditor = new Vditor(root, getOptions(invoke, { ...op, value }));
 
     Data.set(id, { el, invoke, vditor });
     return vditor;
@@ -35,11 +36,12 @@ const getOptions = (invoke, options) => {
 
 export async function reset(id, value, options) {
     const md = Data.get(id);
-    const { invoke, vditor } = md;
+    const { el, invoke, vditor } = md;
     if (vditor) {
         vditor.destroy();
 
-        md.vditor = new Vditor(id, getOptions(invoke, { ...options, value }));
+        const root = el.querySelector('.bb-vditor-container');
+        md.vditor = new Vditor(root, getOptions(invoke, { ...options, value }));
     }
     return md.vditor;
 }
diff --git a/src/components/BootstrapBlazor.Vditor/wwwroot/css/vditor.css b/src/components/BootstrapBlazor.Vditor/wwwroot/css/vditor.css
index d8f69c58..0d48efcf 100644
--- a/src/components/BootstrapBlazor.Vditor/wwwroot/css/vditor.css
+++ b/src/components/BootstrapBlazor.Vditor/wwwroot/css/vditor.css
@@ -1,14 +1,14 @@
 @import url('index.css');
 
-.bb-vditor {
+.bb-vditor .vditor {
     border-radius: var(--bs-border-radius);
     overflow: hidden;
 }
 
-.bb-vditor.is-invalid {
+.bb-vditor.is-invalid .vditor {
     border-color: var(--bs-danger);
 }
 
-.bb-vditor.is-valid {
+.bb-vditor.is-valid .vditor {
     border-color: var(--bs-success);
 }