I am building a chrome extension.

I successfully created a shadow dom using content-script.js to create an div element with shadow mode open then mount it to the body.

This is just a div. What I want to do is that I wanna mount a Vue Component. I am using Vuejs to build this chrome extension and index.html of this project is being used as popup.html.

So I've tried to use chrome.runtime.getUrl('../../views/About.vue') inside content script to mount the vue component to the shadow dom but it was unsuccessful.

What other ways can I try to display Vue components inside shadow dom that is being created by content-script.

CodePudding user response：

To mount Vue Components inside the shadow dom in a Chrome Extension, you will need to follow these steps:

1. Create a new Vue instance and define the components that you want to mount inside the shadow dom.

const app = new Vue({
  components: {
    // Define your Vue Components here
  }
});

2. Create a new shadow dom using the attachShadow method on the element where you want to mount your Vue Components.

const shadowRoot = element.attachShadow({ mode: "open" });

3. Use the $mount method on your Vue instance to mount it inside the shadow dom.

app.$mount(shadowRoot);

4. You can then use the Vue Components inside the shadow dom in the same way that you would use them in a regular Vue app.

<div>
  <my-component></my-component>
</div>

By following these steps, you will be able to mount Vue Components inside the shadow dom in your Chrome Extension, allowing you to take advantage of the benefits of the shadow dom, such as encapsulation and improved performance.