devtools
devtools copied to clipboard
Published
20 hours ago •
vuejs
vuejs
Components are not selectable with Vue devtools when mounted in a shadowDom
Version
6.1.4
Browser and OS info
Chrome 100.0.4896.127 / macOS monterey 12.3.1
Steps to reproduce
Serve the HTML file below.
Components in the first Vue app are selectable with the Vue devtools.
Components in the second Vue app, mounted in a shadowDom, are not.
<!DOCTYPE html>
<html>
<head>
<title>Vue devtools shadowDom test</title>
<script src="https://unpkg.com/[email protected]"></script>
<script>
class MyWebComponent extends HTMLElement {
constructor() {
super();
}
}
customElements.define('my-web-component', MyWebComponent);
</script>
</head>
<body>
<div id="std-app"></div>
<my-web-component></my-web-component>
<script>
Vue.component('my-vue-component', {
template: '<h1>{{ message }}</h1>',
props: ['message']
});
const standardApp = new Vue({
name: 'StandardApp',
el: '#std-app',
template: `
<div>
<my-vue-component message="standard app - select component works" />
</div>`,
})
const myWebComponent = document.querySelector('my-web-component');
const shadow = myWebComponent.attachShadow({ mode: 'open' });
const shadowDiv = document.createElement('div');
shadow.appendChild(shadowDiv);
new Vue({
name: 'ShadowApp',
template: `
<div>
<my-vue-component message="shadow app - select component doesn't work" />
</div>`,
}).$mount(shadowDiv);
</script>
</body>
</html>
What is expected?
Components in the second Vue app, mounted in a shadowDom should be selectable with the Vue devtools.
What is actually happening?
Components in the second Vue app, mounted in a shadowDom are not selectable with the Vue devtools.
Issue is in the core project: https://github.com/vuejs/core/issues/4356 Also same issue already in the devtool project here: https://github.com/vuejs/devtools/issues/1673
