fix(custom-element): should properly patch as props for vue custom elements by lejunyang · Pull Request #12409 · vuejs/core

lejunyang · 2024-11-15T15:22:39Z

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.

…nt (vuejs#12408)

packages/runtime-dom/src/patchProp.ts

github-actions · 2024-11-18T09:39:44Z

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 · 2024-11-18T09:39:59Z

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 · 2026-03-09T03:13:50Z

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

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

edison1105 · 2026-03-09T03:26:36Z

/ecosystem-ci run

vue-bot · 2026-03-09T03:33:32Z

📝 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

…elements sync from #12409

…elements (#14583) sync from #12409

fix(runtime-dom): should properly patch as props for vue custom eleme…

1f0062c

…nt (vuejs#12408)

lejunyang changed the title ~~fix(runtime-dom): should properly patch as props for vue custom eleme…~~ fix(runtime-dom): should properly patch as props for vue custom elements Nov 18, 2024

edison1105 reviewed Nov 18, 2024

View reviewed changes

packages/runtime-dom/src/patchProp.ts Show resolved Hide resolved

edison1105 added need more info Further information is requested 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: custom elements labels Nov 18, 2024

edison1105 changed the title ~~fix(runtime-dom): should properly patch as props for vue custom elements~~ fix(customElement): should properly patch as props for vue custom elements Nov 18, 2024

edison1105 added ready to merge The PR is ready to be merged. and removed need more info Further information is requested labels Nov 18, 2024

edison1105 changed the title ~~fix(customElement): should properly patch as props for vue custom elements~~ fix(custom-element): should properly patch as props for vue custom elements Jan 6, 2025

fix(runtime-dom): avoid patching native attrs as CE props

d464a23

edison1105 added 3 commits March 9, 2026 11:18

chore: Merge branch 'main' into pr/lejunyang/12409

fa3ed8c

chore: Merge branch 'main' into pr/lejunyang/12409

5393d28

chore: Merge branch 'main' into pr/lejunyang/12409

f74493b

vuejs deleted a comment from edison1105 Mar 9, 2026

edison1105 merged commit 740983e into vuejs:main Mar 9, 2026
13 checks passed

edison1105 added a commit that referenced this pull request Mar 16, 2026

fix(custom-element): should properly patch as props for vapor custom …

24d1a86

…elements sync from #12409

edison1105 mentioned this pull request Mar 16, 2026

fix(custom-element): should properly patch as props for vapor custom elements #14583

Merged

edison1105 added a commit that referenced this pull request Mar 16, 2026

fix(custom-element): should properly patch as props for vapor custom …

c4b51d8

…elements (#14583) sync from #12409

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

fix(custom-element): should properly patch as props for vue custom elements#12409
edison1105 merged 5 commits intovuejs:mainfrom
lejunyang:ce-attribute-fix

lejunyang commented Nov 15, 2024 •

edited by coderabbitai bot

Loading

Uh oh!

Uh oh!

github-actions bot commented Nov 18, 2024 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Nov 18, 2024 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 9, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

edison1105 commented Mar 9, 2026

Uh oh!

vue-bot commented Mar 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

lejunyang commented Nov 15, 2024 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

Uh oh!

github-actions bot commented Nov 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new bot commented Nov 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

edison1105 commented Mar 9, 2026

Uh oh!

vue-bot commented Mar 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lejunyang commented Nov 15, 2024 •

edited by coderabbitai bot

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

pkg-pr-new bot commented Nov 18, 2024 •

edited

Loading

coderabbitai bot commented Mar 9, 2026 •

edited

Loading