Invalid property when shoelace is loaded after Vue

[Neevalt]

Describe the bug

When delaying the loading of shoelace in the browser, it breaks some behavior to be expected when coupled with a Vue application. The delay in the demo is here artificially, but the original context was an Astro + Vue app where we encountered the issue quite often after migrating to latest version of Astro.

To Reproduce

Steps to reproduce the behavior:

1. Go to demo link
2. Notice the drawer already open despite the prop being initialized to false

Demo

https://stackblitz.com/edit/github-jbcdpwek-c1lwwc4b?file=src%2FApp.vue,src%2Fmain.js

Browser / OS

• OS: Windows, Linux Mint
• Browser: Edge, Firefox
• Browser version: 135.0.3179.73, 137.0.1

Additional information

The issue can be resolved using Vue's DOM properties : switch the :open="open" for .open="open"

[skawaii]

I've been running into this same problem with the wa-drawer, wa-dialog, and a few other components. I didn't know that using Vue's .prop modifier would resolve the issue. I'll have to give that a try. Thanks, @Neevalt!

That said, it would be nice if we didn't have to resort to the .prop modifier when using Vue. Per the linked Vue documentation,

When setting props on a custom element, Vue 3 automatically checks DOM-property presence using the in operator and will prefer setting the value as a DOM property if the key is present. This means that, in most cases, you won't need to think about this if the custom element follows the recommended best practices.

However, there could be rare cases where the data must be passed as a DOM property, but the custom element does not properly define/reflect the property (causing the in check to fail). In this case, you can force a v-bind binding to be set as a DOM property using the .prop modifier.

The <wa-dialog> docs say that the open attribute is reflected, but it's not behaving that way with Vue. Maybe something to check on? 🤷