You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm not sure if this is the expected behaviour, but when using petite vue with custom elements I cannot access $refs when using Shadow DOM. Here's a quick test case:
<body><test-app></test-app><scripttype="module">import{createApp}from'https://unpkg.com/petite-vue?module'consttemplate=` <h3>{{ title }}</h3> <input ref="input" v-model="title" />`constnoShadow=falseclassAppComponentextendsHTMLElement{app=undefinedstate={title: 'Hello',focusInput(){varinput=this.$refs.input;input.focus()}}focusInput(){this.state.focusInput()}constructor(){super()if(noShadow){// this worksthis.innerHTML=templatethis.app=createApp(this.state)this.app.mount(this)}else{// but this doesn'tconstshadow=this.attachShadow({mode: "open"});constdiv=document.createElement('div');div.setAttribute('v-scope',true)div.innerHTML=template;constnode=shadow.appendChild(div);this.app=createApp(this.state)this.app.mount(node)}}}window.customElements.define('test-app',AppComponent)setTimeout(function(){letapp=document.querySelector('test-app');app.focusInput()},500)</script></body>
This doesn't happen when using the regular DOM, so it's definitely because of the shadow boundary. Still, it would be useful to have access to the $refs in this scenario as well.
Anyone have a clue how to get around this? Thanks!
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I'm not sure if this is the expected behaviour, but when using petite vue with custom elements I cannot access $refs when using Shadow DOM. Here's a quick test case:
This doesn't happen when using the regular DOM, so it's definitely because of the shadow boundary. Still, it would be useful to have access to the $refs in this scenario as well.
Anyone have a clue how to get around this? Thanks!
Beta Was this translation helpful? Give feedback.
All reactions