MutationObserver.disconnect() in _setProp of core/packages/runtime-dom/src/apiCustomElement.ts may cause some confused problem

[Calvin-Ling]

Vue version

3.5.13

Link to minimal reproduction

https://calvin-ling.github.io/vue3-define-custom-comp-issue/issue.html

Steps to reproduce

1.define 2 props in Vue component，such as "label" for string and "complexProp" for object.
2.import { defineCustomElement } from 'vue', and define custom Elements
3.in native js, setAttribute('label', 'a string value'), at the same time, update another props defined(complexProp)
4.setTimeout wait for the observer, look for the dom property "label"
like:

var comp = document.querySelector('my-custom-component');
const test = () => {
  // setAttribute('label'), at the same time, update another props defined
  comp.setAttribute('label', 'update by setAttribute');
  comp.complexProp = {
    content: 'update another props'
  };
  // the label update is not reflected in the component
  setTimeout(() => {
    console.log('setTimeout wait for the observer.');
    console.assert(comp.label === 'update by setAttribute');
  }, 0);
};
onload = () => {
  test();
};

What is expected?

expect: the property "label" should be updated.

What is actually happening?

actual: the "label" update is not reflected in the component.

System Info

Any additional comments?

may be it can use attributeChangedCallback

[edison1105]

Please provide a demo with issues using the Vue custom element.

[Calvin-Ling]

Please provide a demo with issues using the Vue custom element.

Look at this:
Link to minimal reproduction

which use a custom element with tag sc-cross-frame-comp3.

Here is the source code: repo