fix(custom-element): set prop runs pending mutations before disconnect #13897

alex-snezhko · 2025-09-16T04:59:58Z

Calling MutationObserver.disconnect() may cause problems if there are still pending mutations that have not been asynchronously processed yet; before disconnecting flush/process the pending mutations queue to ensure all attribute updates are accounted for.

Summary by CodeRabbit

Bug Fixes
- Improved reliability of attribute/property interop in custom elements, ensuring primitive props reflect to attributes and non-primitives do not.
- Reduced missed or out-of-order updates when mixing attribute and property changes, leading to more consistent rendering.
Refactor
- Streamlined mutation handling in custom elements to minimize race conditions during rapid updates. No API changes.
Tests
- Added tests covering mixed attribute/property updates to prevent regressions.

coderabbitai · 2025-09-16T05:00:05Z

Walkthrough

Introduces a dedicated mutation-processing method for VueElement and refactors MutationObserver usage to route through it. Adjusts observer lifecycle during attribute reflection. Adds tests validating combined attribute/property updates on defineCustomElement components, ensuring primitives reflect to attributes while non-primitives do not.

Changes

Cohort / File(s)	Summary
Runtime DOM: Custom Element observer refactor `packages/runtime-dom/src/apiCustomElement.ts`	Added private method `_processMutations(mutations)` to handle attribute mutations. Replaced inline MutationObserver callbacks with `this._processMutations.bind(this)`. In `_setAttr`, flushes `ob.takeRecords()` via `_processMutations` before `disconnect()`, then re-observes attributes. Updated `_resolveDef` to use the bound handler.
Tests: Attribute/property interop `packages/runtime-dom/__tests__/customElement.spec.ts`	Added two tests checking mixed updates via attributes and properties: verifies rendered output, attribute reflection for primitive `foo`, and absence of attribute for non-primitive `bar`. Duplicated test present in two locations within the file.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User Code
  participant CE as VueElement (Custom Element)
  participant OB as MutationObserver
  participant DEF as Component Def

  Note over CE: Initialization
  U->>CE: set property (bar)\nsetAttribute('foo', v)
  alt Property update
    CE->>DEF: update prop (bar)
  end
  alt Attribute update
    CE->>OB: attribute changes observed
    OB-->>CE: mutations[]
    CE->>CE: _processMutations(mutations)\n→ _setAttr('foo')
    CE->>DEF: update prop (foo)
  end

  Note over CE: During reflection in _setAttr
  CE->>OB: ob.takeRecords()
  CE->>CE: _processMutations(pending)
  CE->>OB: disconnect()
  CE->>OB: observe(attributes: true)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

fix(custom-element): properly resolve props for sync component defs #12855 — Both PRs change VueElement’s _resolveDef in apiCustomElement.ts; this one alters MutationObserver handling, that one adjusts when _resolveProps is invoked.

Suggested labels

:hammer: p3-minor-bug, scope: custom elements

Poem

I twitch my ears at changing states,
Attributes knock, while props await.
An observer hums, mutations sing,
We queue the notes, then neatly ring.
Shadow whispers, values gleam—
Hop, reflect, a bug made clean. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "fix(custom-element): set prop runs pending mutations before disconnect" accurately describes the primary change: ensuring pending mutation records are processed before disconnecting the MutationObserver for custom elements, which matches the new _processMutations helper and observer-related edits in apiCustomElement.ts. It is concise and focused on the main behavioral fix and will be clear to a teammate scanning history. The wording is slightly informal but still communicates the intent unambiguously.
Linked Issues Check	✅ Passed	The code changes directly address the linked issue [#13315] by adding a _processMutations method and ensuring pending mutation records (via ob.takeRecords()) are processed before disconnecting the MutationObserver in _setAttr/_resolveDef, which prevents missed attribute-to-property updates; the observer callbacks were centralized and observation is re-attached after updates. The PR also adds tests that exercise attribute/property interop so the behavioral fix is validated at the integration level. Given these targeted edits and test coverage, the primary coding objective from the linked issue appears to be satisfied.
Out of Scope Changes Check	✅ Passed	The changes are confined to internal custom element handling in packages/runtime-dom/src/apiCustomElement.ts and to tests in packages/runtime-dom/tests/customElement.spec.ts, with no exported/public API signature changes, so there are no apparent out-of-scope code modifications relative to the linked issue objectives. The only minor noise is a duplicated test insertion in the spec file, which is redundant but not functionally unrelated. Overall the edits align with the stated goal of flushing pending mutations before disconnecting the observer.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

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

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b555f02 and 2b82824.

📒 Files selected for processing (2)

packages/runtime-dom/__tests__/customElement.spec.ts (1 hunks)
packages/runtime-dom/src/apiCustomElement.ts (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/runtime-dom/__tests__/customElement.spec.ts (1)

packages/runtime-core/src/index.ts (1)

nextTick (62-62)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: Redirect rules
GitHub Check: Header rules
GitHub Check: Pages changed
GitHub Check: test / e2e-test

🔇 Additional comments (4)

packages/runtime-dom/src/apiCustomElement.ts (3)
345-349: Centralized mutation handling looks correct.

Iterating queued MutationRecords and delegating to _setAttr is the right minimal flush. No recursion risk since _setAttr disables reflection.

365-366: Using a bound class method for MutationObserver is fine.

This keeps the callback stable across re-observes of the same observer instance.

515-518: Flush pending mutation records before disconnect — this fixes the missed attr→prop updates.

Good call to process takeRecords() before disconnect(), then re‑observe after reflection. Please double‑check if we also want to flush on element teardown to avoid dropping rare late records during disconnection (probably not needed, but worth confirming with the linked repro).

If desired, the disconnect flush on teardown could look like:
// inside disconnectedCallback, before ob.disconnect()
const ob = this._ob
if (ob) {
  this._processMutations(ob.takeRecords())
  ob.disconnect()
  this._ob = null
}
packages/runtime-dom/__tests__/customElement.spec.ts (1)

226-249: Test covers the mixed attr+prop update race well.

Assertions verify DOM render and reflection semantics for both update orders. Looks good.

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

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.}

github-actions · 2025-09-16T05:01:03Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB (+92 B)	38.5 kB (+38 B)	34.7 kB (+43 B)
vue.global.prod.js	159 kB (+92 B)	58.6 kB (+41 B)	52.2 kB (+42 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.6 kB	18.2 kB	16.7 kB
createApp	54.6 kB	21.3 kB	19.4 kB
createSSRApp	58.9 kB	23 kB	21 kB
defineCustomElement	59.7 kB (+92 B)	22.9 kB (+41 B)	20.9 kB (+26 B)
overall	68.8 kB	26.4 kB	24.2 kB

pkg-pr-new · 2025-09-16T05:01:10Z

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: 2b82824

fix(custom-element): set prop runs pending mutations before disconnect

2b82824

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(custom-element): set prop runs pending mutations before disconnect #13897

fix(custom-element): set prop runs pending mutations before disconnect #13897

Uh oh!

alex-snezhko commented Sep 16, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Sep 16, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 16, 2025

Uh oh!

pkg-pr-new bot commented Sep 16, 2025

Uh oh!

Uh oh!

Uh oh!

fix(custom-element): set prop runs pending mutations before disconnect #13897

Are you sure you want to change the base?

fix(custom-element): set prop runs pending mutations before disconnect #13897

Uh oh!

Conversation

alex-snezhko commented Sep 16, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Sep 16, 2025

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new bot commented Sep 16, 2025

Uh oh!

Uh oh!

alex-snezhko commented Sep 16, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Sep 16, 2025 •

edited

Loading