core icon indicating copy to clipboard operation
core copied to clipboard

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

Open Calvin-Ling opened this issue 7 months ago • 2 comments

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

Calvin-Ling avatar May 12 '25 07:05 Calvin-Ling

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

edison1105 avatar May 13 '25 00:05 edison1105

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

Calvin-Ling avatar May 13 '25 02:05 Calvin-Ling