What is the process for creating a custom Vue 3 element with incorporating styles for child components?

Question

What is the process for creating a custom Vue 3 element with incorporating styles for child components?

After experimenting with Vue's defineCustomElement() to develop a custom element, I encountered an issue where the child component styles were not being included in the shadow root for some unknown reason.

To address this problem, I took a different approach by manually creating my shadow root using the native Element.attachShadow() API instead of relying on defineCustomElement(). However, this alternative method led to none of the styles being loaded at all:

Snippet: main.js:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

let treeHead = document.querySelector("#app");
let holder = document.createElement("div");
let shadow = treeHead.attachShadow({ mode: "open" });
shadow.appendChild(holder);

createApp(App).use(store).use(router).mount(holder);

Snippet vue.config.js:

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap((options) => {
        options.shadowMode = true;
        return options;
      });
    config.module
      .rule("css")
      .oneOf("vue-modules")
      .use("vue-style-loader")
      .tap((options) => {
        options.shadowMode = true;
        return options;
      });
    config.module
      .rule("css")
      .oneOf("vue")
      .use("vue-style-loader")
      .tap((options) => {
        options.shadowMode = true;
        return options;
      });
  },
};

Snippet package.json:

{
  "name": "shadow-root",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.2.20",
    "vue-loader": "^16.8.2",
    "vue-router": "^4.0.0-0",
    "vue-style-loader": "^4.1.3",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Any suggestions on how to properly create a custom element with all its styles within the shadow root?

javascript vue.js webpack vuejs3 shadow-dom

Answer 1

Answer №1

In Vue 3, the Vue config mentioned is no longer required. It was specifically used by the development server in Vue 2 to render styles within custom elements.

The recommended approach for registering custom elements now is to use defineCustomElement(). However, there is an ongoing issue when using this method where styles of nested components are not rendered at all (@vuejs/vue-next#4462).

A workaround involves importing all components as custom elements so that styles are attached to the component definition instead of being appended to the <head>. These styles can then be inserted into the DOM during mounting:

To enable vue-loader's customElement mode in your vue.config.js:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.customElement = true
        return options
      })
  }
}

Alternatively, you can rename all component file extensions from .vue to .ce.vue.

Create a utility function that wraps Vue's defineCustomElement() and performs the following steps within a setup():
1. Set up a temporary application instance with a mixin for the mounted and unmounted lifecycle hooks.
2. In the mounted hook, insert the component's own styles from this.$.type.styles into the DOM using a <style> tag. Repeat this process for component definitions from this.$options.components map.
3. In the unmounted hook, remove the <style> tag added during the mounted phase.
4. Copy the temporary application instance's _context to the current application context obtained through getCurrentInstance().
5. Return a render function for the component.
```
// defineCustomElementWithStyles.js
import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue'

const nearestElement = (el) => {
  while (el?.nodeType !== 1 /* ELEMENT */) el = el.parentElement
  return el
}

export const defineCustomElement = (component) =>
  VueDefineCustomElement({
    setup() {
      const app = createApp()
      // Code block here
      return () => h(component)
    },
  })
```

Edit the public/index.html file to replace the <div id="app"> with a custom element named "my-custom-element":

Before:

// public/index.html
<body>
  <div id="app"></div>
</body>

After:

// public/index.html
<body>
  <my-custom-element></my-custom-element>
</body>

Instead of using createApp(), utilize the defineCustomElement() function mentioned earlier to create a custom element for your app:

Before:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

After:

// main.js
import { defineCustomElement } from './defineCustomElementWithStyles'
import App from './App.vue'
customElements.define('my-custom-element', defineCustomElement(App))

Demo link

Answer 2

In Vue 3, the Vue config mentioned is no longer required. It was specifically used by the development server in Vue 2 to render styles within custom elements.

The recommended approach for registering custom elements now is to use defineCustomElement(). However, there is an ongoing issue when using this method where styles of nested components are not rendered at all (@vuejs/vue-next#4462).

A workaround involves importing all components as custom elements so that styles are attached to the component definition instead of being appended to the <head>. These styles can then be inserted into the DOM during mounting:

To enable vue-loader's customElement mode in your vue.config.js:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.customElement = true
        return options
      })
  }
}

Alternatively, you can rename all component file extensions from .vue to .ce.vue.

Create a utility function that wraps Vue's defineCustomElement() and performs the following steps within a setup():
1. Set up a temporary application instance with a mixin for the mounted and unmounted lifecycle hooks.
2. In the mounted hook, insert the component's own styles from this.$.type.styles into the DOM using a <style> tag. Repeat this process for component definitions from this.$options.components map.
3. In the unmounted hook, remove the <style> tag added during the mounted phase.
4. Copy the temporary application instance's _context to the current application context obtained through getCurrentInstance().
5. Return a render function for the component.
```
// defineCustomElementWithStyles.js
import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue'

const nearestElement = (el) => {
  while (el?.nodeType !== 1 /* ELEMENT */) el = el.parentElement
  return el
}

export const defineCustomElement = (component) =>
  VueDefineCustomElement({
    setup() {
      const app = createApp()
      // Code block here
      return () => h(component)
    },
  })
```

Edit the public/index.html file to replace the <div id="app"> with a custom element named "my-custom-element":

Before:

// public/index.html
<body>
  <div id="app"></div>
</body>

After:

// public/index.html
<body>
  <my-custom-element></my-custom-element>
</body>

Instead of using createApp(), utilize the defineCustomElement() function mentioned earlier to create a custom element for your app:

Before:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

After:

// main.js
import { defineCustomElement } from './defineCustomElementWithStyles'
import App from './App.vue'
customElements.define('my-custom-element', defineCustomElement(App))

Demo link

What is the process for creating a custom Vue 3 element with incorporating styles for child components?

Answer №1

Similar questions

Guide to generating an array entry for every line of a text file in node.js

ng-repeat not functioning properly when using track by, filter, and orderBy

Receiving error messages about missing images in my React project

Identifying browsers with Zend Framework versus JavaScript

What is the best way to consistently position a particular row at the bottom of the table in AG-grid?

Install the npm package if there have been modifications to the package.json file

What is the best way to retrieve the results of an indexedDb request beyond the limitations of its callback function?

Tips for effectively organizing a collapsible list

By default, the HTML table will highlight the specific column based on the current month using either AngularJS or JavaScript upon loading

Testing form submission in React with React Testing Library and checking if prop is called

Conflicting Angular components: Sorting tables and dragging/dropping table rows

modifying a record in MongoDB with the help of Mongoose

Tips for efficiently proxying URL calls in Vue.js during production

Generating a component and rendering it according to the dynamic route parameters using mapStateToProps and reselect techniques

Leverage ESlint for optimal code quality in your expressjs

What is the best way to load the nested array attributes in an HTML table dynamically with AngularJS?

Refresh Twitter Bootstrap Tooltip after deactivating/removing

Challenges arise when using Bootstrap 4 for country selection

Navigating through the Express.js routes incorrectly

What is the best way to craft an if/else statement for a situation when a twig variable is undefined?