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

Removing item from Angular service

What are the steps to switch the dropdown values?

Vue encountered an invalid value for the dynamic directive argument, which was expected to be a string or null, but

Instructions on utilizing type interfaces for prop drilling in my React Typescript counter

Efficiently transferring a style property to a child component as a computed property in Vue.js

Selecting radio button does not update corresponding label

Prevent users from selecting the same item for multiple dropdowns

Checking for duplicate entries in an array created with the Angular form builder

Move the cursor over the text to reveal an image

Validating properties of a class using Typescript's Class-Validator

Embracing the Unknown: Exploring Wildcard Values

Utilizing Local Storage in Vuex Store with Vue.js

What is the best way to retrieve the value of a property within a JavaScript object?

Simple HTML and CSS exercise for beginners to grasp the concept

Leveraging AJAX within a RESTful API in a Node.js environment to retrieve a JSON file and dynamically parse its contents according to the specific button selected on the front-end interface

Numerous entities in motion, each adorned with its own accompanying text

React-Bootstrap Popup encounters overlay failure

When properties remain unchanged, they do not hold the same value in a Firestore-triggered Cloud Function

The compatibility of Datatables responsive feature with ajax calls appears to be limited

Manipulating DropDownList Attributes in ASP.NET using JavaScript