From 8543baa2d866e5aa2fceda56c5fde162aeb6b9f9 Mon Sep 17 00:00:00 2001
From: Vida Xie <vida_2020@163.com>
Date: Tue, 18 Nov 2025 23:20:29 +0800
Subject: [PATCH 1/4] feat(vModel): support `HTMLDetailsElement`

---
 .../__tests__/directives/vModel.spec.ts       | 31 +++++++++++++++++++
 packages/runtime-dom/src/directives/vModel.ts | 19 ++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
index c3c420f407a..8cacc8f520d 100644
--- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
@@ -1496,4 +1496,35 @@ describe('vModel', () => {
     await nextTick()
     expect(foo.checked).toEqual(false)
   })
+
+  it('should work with details', async () => {
+    const component = defineComponent({
+      data() {
+        return { value: null }
+      },
+      render() {
+        return [
+          withVModel(
+            h('details', {
+              'onUpdate:modelValue': setValue.bind(this),
+            }),
+            this.value,
+          ),
+        ]
+      },
+    })
+    render(h(component), root)
+
+    const details: HTMLDetailsElement = root.querySelector('details')
+    const data = root._vnode.component.data
+
+    details.open = true
+    triggerEvent('toggle', details)
+    await nextTick()
+    expect(data.value).toEqual(true)
+
+    data.value = false
+    await nextTick()
+    expect(details.open).toEqual(false)
+  })
 })
diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
index 07b23d20ac6..2a3bc6f211a 100644
--- a/packages/runtime-dom/src/directives/vModel.ts
+++ b/packages/runtime-dom/src/directives/vModel.ts
@@ -370,6 +370,22 @@ function getCheckboxValue(
   return checked
 }
 
+export const vModelDetails: ModelDirective<HTMLDetailsElement> = {
+  created(el, { value }, vnode) {
+    el.open = looseEqual(value, vnode.props!.value)
+    el[assignKey] = getModelAssigner(vnode)
+    addEventListener(el, 'toggle', () => {
+      el[assignKey](el.open)
+    })
+  },
+  beforeUpdate(el, { value, oldValue }, vnode) {
+    el[assignKey] = getModelAssigner(vnode)
+    if (value !== oldValue) {
+      el.open = looseEqual(value, vnode.props!.value)
+    }
+  },
+}
+
 export const vModelDynamic: ObjectDirective<
   HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
 > = {
@@ -393,6 +409,8 @@ function resolveDynamicModel(tagName: string, type: string | undefined) {
       return vModelSelect
     case 'TEXTAREA':
       return vModelText
+    case 'DETAILS':
+      return vModelDetails
     default:
       switch (type) {
         case 'checkbox':
@@ -465,4 +483,5 @@ export type VModelDirective =
   | typeof vModelCheckbox
   | typeof vModelSelect
   | typeof vModelRadio
+  | typeof vModelDetails
   | typeof vModelDynamic

From 628b2b8ee92716f3261172ae3429b394caeeb369 Mon Sep 17 00:00:00 2001
From: Vida Xie <vida_2020@163.com>
Date: Tue, 18 Nov 2025 23:42:39 +0800
Subject: [PATCH 2/4] wip: update

---
 packages/compiler-dom/__tests__/transforms/vModel.spec.ts  | 7 +++++++
 packages/compiler-dom/src/errors.ts                        | 2 +-
 packages/compiler-dom/src/runtimeHelpers.ts                | 3 +++
 packages/compiler-dom/src/transforms/vModel.ts             | 1 +
 packages/compiler-ssr/src/transforms/ssrVModel.ts          | 2 ++
 .../compiler-vapor/__tests__/transforms/vModel.spec.ts     | 6 ++++++
 6 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
index 6fe39900ca8..3a466e3f7f7 100644
--- a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
@@ -10,6 +10,7 @@ import { transformElement } from '../../../compiler-core/src/transforms/transfor
 import { DOMErrorCodes } from '../../src/errors'
 import {
   V_MODEL_CHECKBOX,
+  V_MODEL_DETAILS,
   V_MODEL_DYNAMIC,
   V_MODEL_RADIO,
   V_MODEL_SELECT,
@@ -99,6 +100,12 @@ describe('compiler: transform v-model', () => {
     expect(generate(root).code).toMatchSnapshot()
   })
 
+  test('simple expression for details', () => {
+    const root = transformWithModel('<details v-model="model" />')
+    expect(root.helpers).toContain(V_MODEL_DETAILS)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
   describe('errors', () => {
     test('plain elements with argument', () => {
       const onError = vi.fn()
diff --git a/packages/compiler-dom/src/errors.ts b/packages/compiler-dom/src/errors.ts
index 788de930699..99afd0756da 100644
--- a/packages/compiler-dom/src/errors.ts
+++ b/packages/compiler-dom/src/errors.ts
@@ -53,7 +53,7 @@ export const DOMErrorMessages: Record<DOMErrorCodes, string> = {
   [DOMErrorCodes.X_V_HTML_WITH_CHILDREN]: `v-html will override element children.`,
   [DOMErrorCodes.X_V_TEXT_NO_EXPRESSION]: `v-text is missing expression.`,
   [DOMErrorCodes.X_V_TEXT_WITH_CHILDREN]: `v-text will override element children.`,
-  [DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
+  [DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT]: `v-model can only be used on <input>, <textarea>, <select> and <details> elements.`,
   [DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT]: `v-model argument is not supported on plain elements.`,
   [DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
   [DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
diff --git a/packages/compiler-dom/src/runtimeHelpers.ts b/packages/compiler-dom/src/runtimeHelpers.ts
index c5349ad7940..f1764b4c00d 100644
--- a/packages/compiler-dom/src/runtimeHelpers.ts
+++ b/packages/compiler-dom/src/runtimeHelpers.ts
@@ -8,6 +8,9 @@ export const V_MODEL_TEXT: unique symbol = Symbol(__DEV__ ? `vModelText` : ``)
 export const V_MODEL_SELECT: unique symbol = Symbol(
   __DEV__ ? `vModelSelect` : ``,
 )
+export const V_MODEL_DETAILS: unique symbol = Symbol(
+  __DEV__ ? `vModelDetails` : ``,
+)
 export const V_MODEL_DYNAMIC: unique symbol = Symbol(
   __DEV__ ? `vModelDynamic` : ``,
 )
diff --git a/packages/compiler-dom/src/transforms/vModel.ts b/packages/compiler-dom/src/transforms/vModel.ts
index 5c28580b984..a91b6cbcd63 100644
--- a/packages/compiler-dom/src/transforms/vModel.ts
+++ b/packages/compiler-dom/src/transforms/vModel.ts
@@ -51,6 +51,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     tag === 'input' ||
     tag === 'textarea' ||
     tag === 'select' ||
+    tag === 'details' ||
     isCustomElement
   ) {
     let directiveToUse = V_MODEL_TEXT
diff --git a/packages/compiler-ssr/src/transforms/ssrVModel.ts b/packages/compiler-ssr/src/transforms/ssrVModel.ts
index cbe5b2b42a3..9998f95e978 100644
--- a/packages/compiler-ssr/src/transforms/ssrVModel.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVModel.ts
@@ -174,6 +174,8 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
       node.children = [createInterpolation(model, model.loc)]
     } else if (node.tag === 'select') {
       processSelectChildren(node.children)
+    } else if (node.tag === 'details') {
+      // TODO
     } else {
       context.onError(
         createDOMCompilerError(
diff --git a/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts b/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts
index 23b99ec7019..b1552f4991b 100644
--- a/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts
@@ -77,6 +77,12 @@ describe('compiler: vModel transform', () => {
     expect(root2.helpers).toContain('applyDynamicModel')
   })
 
+  test.todo('should support details', () => {
+    const { code, helpers } = compileWithVModel('<details v-model="model" />')
+    expect(code).toMatchSnapshot()
+    expect(helpers).toContain('applyDetailsModel')
+  })
+
   describe('errors', () => {
     test('invalid element', () => {
       const onError = vi.fn()

From 6fa83cc94b62c664a4a01f5d7c61923634c2afa8 Mon Sep 17 00:00:00 2001
From: Vida Xie <vida_2020@163.com>
Date: Wed, 19 Nov 2025 00:04:25 +0800
Subject: [PATCH 3/4] wip: update

---
 .../transforms/__snapshots__/vModel.spec.ts.snap | 16 ++++++++++++++++
 packages/compiler-dom/src/runtimeHelpers.ts      |  1 +
 packages/compiler-dom/src/transforms/vModel.ts   |  3 +++
 packages/runtime-dom/src/index.ts                |  1 +
 4 files changed, 21 insertions(+)

diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index b357ac15a1b..4cece4060cd 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -143,6 +143,22 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: transform v-model > simple expression for details 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { vModelDetails: _vModelDetails, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return _withDirectives((_openBlock(), _createElementBlock("details", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
+      [_vModelDetails, model]
+    ])
+  }
+}"
+`;
+
 exports[`compiler: transform v-model > simple expression for input (checkbox) 1`] = `
 "const _Vue = Vue
 
diff --git a/packages/compiler-dom/src/runtimeHelpers.ts b/packages/compiler-dom/src/runtimeHelpers.ts
index f1764b4c00d..d2b16300374 100644
--- a/packages/compiler-dom/src/runtimeHelpers.ts
+++ b/packages/compiler-dom/src/runtimeHelpers.ts
@@ -34,6 +34,7 @@ registerRuntimeHelpers({
   [V_MODEL_CHECKBOX]: `vModelCheckbox`,
   [V_MODEL_TEXT]: `vModelText`,
   [V_MODEL_SELECT]: `vModelSelect`,
+  [V_MODEL_DETAILS]: `vModelDetails`,
   [V_MODEL_DYNAMIC]: `vModelDynamic`,
   [V_ON_WITH_MODIFIERS]: `withModifiers`,
   [V_ON_WITH_KEYS]: `withKeys`,
diff --git a/packages/compiler-dom/src/transforms/vModel.ts b/packages/compiler-dom/src/transforms/vModel.ts
index a91b6cbcd63..25c0acb4fe4 100644
--- a/packages/compiler-dom/src/transforms/vModel.ts
+++ b/packages/compiler-dom/src/transforms/vModel.ts
@@ -11,6 +11,7 @@ import {
 import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 import {
   V_MODEL_CHECKBOX,
+  V_MODEL_DETAILS,
   V_MODEL_DYNAMIC,
   V_MODEL_RADIO,
   V_MODEL_SELECT,
@@ -95,6 +96,8 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       }
     } else if (tag === 'select') {
       directiveToUse = V_MODEL_SELECT
+    } else if (tag === 'details') {
+      directiveToUse = V_MODEL_DETAILS
     } else {
       // textarea
       __DEV__ && checkDuplicatedValue()
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index 8ea34689552..974dfeed2b3 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -284,6 +284,7 @@ export {
   vModelCheckbox,
   vModelRadio,
   vModelSelect,
+  vModelDetails,
   vModelDynamic,
 } from './directives/vModel'
 export { withModifiers, withKeys } from './directives/vOn'

From aca14ac8e1b823c4f2207ea63b73b49e30034678 Mon Sep 17 00:00:00 2001
From: Vida Xie <vida_2020@163.com>
Date: Wed, 19 Nov 2025 17:42:20 +0800
Subject: [PATCH 4/4] test: update snapshot

---
 .../__tests__/__snapshots__/compileTemplate.spec.ts.snap        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
index c958c9e031e..7fe08e72a5c 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
@@ -80,6 +80,6 @@ export function ssrRender(_ctx, _push, _parent, _attrs) {
 exports[`template errors 1`] = `
 [
   [SyntaxError: Error parsing JavaScript expression: Unexpected token (1:3)],
-  [SyntaxError: v-model can only be used on <input>, <textarea> and <select> elements.],
+  [SyntaxError: v-model can only be used on <input>, <textarea>, <select> and <details> elements.],
 ]
 `;