Skip to content

[custom-element] native slots attributes not responding to reactivity #13904

@roydukkey

Description

@roydukkey

Vue version

3.5.21

Link to minimal reproduction

https://play.vuejs.org/#eNqNU01v2zAM/SucDnUKpPZhO3luujVIgQ5YW2w96uLIjONWlgxLzgcC//dRUp14WFb0JIl8Ih/JxwP73jTxpkOWssyItmosGLRdM+OqqhvdWjhAi6spFLiqFM47Y3W9kFijstDDqtU1RPQ/OuJ/7ue6bt48cRKeWhE+FuhSRV+54kqMI5k4hJ9E9f5KDPjobNZJiHh5GcJoZSzkRTGXuTFw7chObNuhc2dJKImKoYfFupG5RXoBZONEkA4BvA/gHvIactjiEk6gbWXXZBQ+kVZQ7yETusBZkyX+hFwVbyYjtR2sGHjHcNvZ6enXGQgUGo2KLBVhKGkBVtM1F7baIIh1rko0sWefjOn78sjohubYh1ZUBg6HU2duIHp8iCCl4+4ugr4Pcdwff1t21lJR34SsxOs1Z6OWfhrunM2edVlKDCmyJHyiEFky6i6bMmtoMKuqjF+MVqStg8vBmaNcSWwfG1vR4DhLwXucL5dSb394m5vfdLCLNYrXM/YXs3M2zp6oW9hukLOjz+ZtiTa4F78fcEf3o7PWRScJ/Y7zFxotO8cxwG47VRDtEc6zvfeKr1T5bBY7i8oMRTmiDtl7PGekeqfZ/5V+ovs5/uL/cdVTF//dndGaSpIDzclSqOPKchUW5qnVjclO079JYam1xFxBP5u41aC0765HA6kX+lgJFxcQ0QOLK++KSA6hgsxp+WMfKCdhQw4vvr+V0/8Bk+GLUQ==

Steps to reproduce

  1. Open DevTools and expand the shadow root of my-component
  2. Notice that the 'added-class' is applied to both the p and slot elements
  3. Click the button to toggle the classname off through the update of a property on my-component
  4. Notice that the 'added-class' is removed from the p element but not the slot element

What is expected?

The slot element should have the classname remove from it after the button is clicked in step 3.

What is actually happening?

The slot element is not updating its attributes in response to reactivity.

System Info

System:
    OS: macOS 15.6.1
    CPU: (14) arm64 Apple M4 Pro
    Memory: 88.97 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.17.0 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: 10.14.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Brave Browser: 138.1.80.120
    Safari: 18.6

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.has workaroundA workaround has been found to avoid the problemscope: custom elements

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions