fix(custom-element): should properly patch as props for vue custom elements

[lejunyang]

close #12408

Summary by CodeRabbit

• Bug Fixes

  • Improved custom element attribute handling: numeric tabindex is preserved as an attribute, undeclared native attributes are retained, and declared object props on async-loaded custom elements are respected.

• Tests

  • Added tests for custom element attribute behavior and async component prop resolution to validate initial binding and post-resolution rendering.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	104 kB (+167 B)	39.4 kB (+50 B)	35.4 kB (+18 B)
vue.global.prod.js	162 kB (+167 B)	59.4 kB (+49 B)	52.9 kB (+59 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48 kB (+167 B)	18.7 kB (+57 B)	17.1 kB (+54 B)
createApp	56.1 kB (+167 B)	21.7 kB (+57 B)	19.8 kB (+51 B)
createSSRApp	60.4 kB (+167 B)	23.5 kB (+54 B)	21.4 kB (+47 B)
defineCustomElement	61.8 kB (+167 B)	23.5 kB (+53 B)	21.4 kB (+54 B)
overall	70.5 kB (+167 B)	27 kB (+58 B)	24.6 kB (+91 B)

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@12409

npm i https://pkg.pr.new/@vue/compiler-core@12409

yarn add https://pkg.pr.new/@vue/compiler-core@12409.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@12409

npm i https://pkg.pr.new/@vue/compiler-dom@12409

yarn add https://pkg.pr.new/@vue/compiler-dom@12409.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@12409

npm i https://pkg.pr.new/@vue/compiler-sfc@12409

yarn add https://pkg.pr.new/@vue/compiler-sfc@12409.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@12409

npm i https://pkg.pr.new/@vue/compiler-ssr@12409

yarn add https://pkg.pr.new/@vue/compiler-ssr@12409.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@12409

npm i https://pkg.pr.new/@vue/reactivity@12409

yarn add https://pkg.pr.new/@vue/reactivity@12409.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@12409

npm i https://pkg.pr.new/@vue/runtime-core@12409

yarn add https://pkg.pr.new/@vue/runtime-core@12409.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@12409

npm i https://pkg.pr.new/@vue/runtime-dom@12409

yarn add https://pkg.pr.new/@vue/runtime-dom@12409.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@12409

npm i https://pkg.pr.new/@vue/server-renderer@12409

yarn add https://pkg.pr.new/@vue/server-renderer@12409.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@12409

npm i https://pkg.pr.new/@vue/shared@12409

yarn add https://pkg.pr.new/@vue/shared@12409.tgz

vue

pnpm add https://pkg.pr.new/vue@12409

npm i https://pkg.pr.new/vue@12409

yarn add https://pkg.pr.new/vue@12409.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@12409

npm i https://pkg.pr.new/@vue/compat@12409

yarn add https://pkg.pr.new/@vue/compat@12409.tgz

commit: 4e12a59

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 80394adc-6ee4-4489-916f-e314cb1ae08e

📥 Commits

Reviewing files that changed from the base of the PR and between 5393d28 and f74493b.

📒 Files selected for processing (2)

• packages/runtime-dom/__tests__/customElement.spec.ts
• packages/runtime-dom/src/patchProp.ts

---

📝 Walkthrough

Walkthrough

Adds tests for Vue custom element attribute/prop behaviors (numeric, boolean, undeclared native attrs, and object props with async component resolution) and changes patchProp to consult declared prop definitions on Vue custom elements when deciding to set keys as DOM properties or attributes.

Changes

Cohort / File(s)	Summary
Test Suite Updates packages/runtime-dom/__tests__/customElement.spec.ts	Added tests validating numeric tabindex and boolean data-test attribute reflection, preservation of undeclared native attributes (e.g., translate), and object prop binding behavior before and after async custom element resolution.
Prop Handling Logic packages/runtime-dom/src/patchProp.ts	Introduced shouldSetAsPropForVueCE(el, key) to detect declared CE props (array or object form, via camelization) and updated Vue CE prop-vs-attr decision to consult this helper, while preserving previous async-loader heuristic as a fallback.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix(custom-element): properly resolve props for sync component defs #12855: Changes around custom element prop handling and resolution timing that overlap with declared-prop checks and async CE behavior.

Suggested reviewers

• skirtles-code

Poem

🐰 I hopped through props and attrs today,
Numbers, truths, and objects found their way.
Async shells unfurled in time,
Declared props now read the sign—
A rabbit cheers this tidy play.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: fixing proper prop patching for Vue custom elements, which directly addresses the issue of number-like and boolean attributes being incorrectly set as properties.
Linked Issues check	✅ Passed	The code changes directly address issue #12408 by implementing proper prop handling via shouldSetAsPropForVueCE() and adding tests for numeric tabindex and boolean attributes on Vue custom elements.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing Vue custom element prop patching: the new shouldSetAsPropForVueCE helper, updated patchProp logic, and corresponding tests for the specific issue.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
nuxt	✅ success	✅ success
language-tools	❌ failure	❌ failure
vant	✅ success	❌ failure
primevue	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success
test-utils	✅ success	✅ success
vue-i18n	❌ failure	✅ success
quasar	✅ success	✅ success
router	✅ success	✅ success
radix-vue	✅ success	✅ success
vuetify	✅ success	✅ success
vitepress	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vue-macros	✅ success	✅ success
pinia	✅ success	✅ success