Add CSS styles directly into the shadow-root instead of the head tag | Vue.js and Webpack

Question

Add CSS styles directly into the shadow-root instead of the head tag | Vue.js and Webpack

Currently, I'm developing a widget that can be embedded on websites using Vue.js along with vue-custom-element. Everything was going well until I encountered an issue.

The problem arises when trying to integrate a component (along with its CSS) from a package such as vue-number-input. Despite my attempts to keep the CSS encapsulated within the shadow root, it ends up being injected into the head of the webpage.

You can observe this behavior in this screenshot, where the CSS from the number input package is placed in the head instead of the shadow root.

I have made all necessary adjustments to ensure that the application functions properly within the shadow root.

To further investigate this issue, I have shared my vue.config.js, my main.js file (where I register the custom element), and my component (where I import the package's component).

If anyone has insights on how to resolve this issue or if it is even feasible, please share your expertise.

javascript vue.js webpack web-component shadow-dom

Answer 1

Answer №1

In the event that the library itself is injecting styles into the head of the page, your only option may be to write a script that manually copies them into the shadow dom after initialization. I faced a similar issue with Font Awesome icons, but fortunately, they provided a workaround for this problem. (https://github.com/FortAwesome/vue-fontawesome#web-components-with-vue-web-component-wrapper)

Answer 2

In the event that the library itself is injecting styles into the head of the page, your only option may be to write a script that manually copies them into the shadow dom after initialization. I faced a similar issue with Font Awesome icons, but fortunately, they provided a workaround for this problem. (https://github.com/FortAwesome/vue-fontawesome#web-components-with-vue-web-component-wrapper)

Answer 3

Answer №2

After conducting extensive research to find a method that would lazy-load our styles into the shadow-root, we came up empty-handed. Ultimately, we had to settle for a less than ideal solution, which meant loading all the styles on initial load.

Note: While this workaround works for QA and production environments, during development, the styles will still be loaded within the head of the page. It's important to ensure that no other styles conflict with this setup.

Our approach to achieving this was as follows:

// vue.config.js

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    // ...
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
     }),
   ],
 },
 chainWebpack: (config) => {
   config.optimization.delete('splitChunks');
 },
};

// main.js

import createStyleLink from '@/helpers/createStyleLink';

// ...

const options = {};

// Enabling shadow root for the production build
if (process.env.NODE_ENV === 'production') {
  options.shadow = true;
  options.beforeCreateVueInstance = (root) => {
    const rootNode = root.el.getRootNode();
    if (rootNode instanceof ShadowRoot) {
      root.shadowRoot = rootNode;
    } else {
      root.shadowRoot = document.head;
    }
    // After deployment, this code will create a style link and place it inside the shadow root. 
    // Ideally, a CDN should be used for this purpose.
    createStyleLink(rootNode, `${process.env.VUE_APP_URL}/css/app.css`);
    return root;
  };
}

// ...

Vue.customElement('widget', App, options);

// createStyleLink.js

export default function (node, url) {
  const link = document.createElement('link');
  link.href = url;
  link.type = 'text/css';
  link.rel = 'stylesheet';
  node.appendChild(link);
}

I hesitate to label this as a perfect solution, as it is more of a makeshift fix for the issue at hand.

Answer 4

After conducting extensive research to find a method that would lazy-load our styles into the shadow-root, we came up empty-handed. Ultimately, we had to settle for a less than ideal solution, which meant loading all the styles on initial load.

Note: While this workaround works for QA and production environments, during development, the styles will still be loaded within the head of the page. It's important to ensure that no other styles conflict with this setup.

Our approach to achieving this was as follows:

// vue.config.js

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    // ...
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
     }),
   ],
 },
 chainWebpack: (config) => {
   config.optimization.delete('splitChunks');
 },
};

// main.js

import createStyleLink from '@/helpers/createStyleLink';

// ...

const options = {};

// Enabling shadow root for the production build
if (process.env.NODE_ENV === 'production') {
  options.shadow = true;
  options.beforeCreateVueInstance = (root) => {
    const rootNode = root.el.getRootNode();
    if (rootNode instanceof ShadowRoot) {
      root.shadowRoot = rootNode;
    } else {
      root.shadowRoot = document.head;
    }
    // After deployment, this code will create a style link and place it inside the shadow root. 
    // Ideally, a CDN should be used for this purpose.
    createStyleLink(rootNode, `${process.env.VUE_APP_URL}/css/app.css`);
    return root;
  };
}

// ...

Vue.customElement('widget', App, options);

// createStyleLink.js

export default function (node, url) {
  const link = document.createElement('link');
  link.href = url;
  link.type = 'text/css';
  link.rel = 'stylesheet';
  node.appendChild(link);
}

I hesitate to label this as a perfect solution, as it is more of a makeshift fix for the issue at hand.

Add CSS styles directly into the shadow-root instead of the head tag | Vue.js and Webpack

Answer №1

Answer №2

Similar questions

Having difficulty adjusting the width of a div element

Is it possible to generate a basic HTML page using Express JS without utilizing Ejs or any other templating engine

Highcharts JS encountered an error: x[(intermediate value)(intermediate value)(intermediate value)] is not a valid constructor

Trigger Object RuntimeError

Having trouble getting the Facebook like button to display on my website using an iframe in the markup

Handling AJAX requests using jQuery

Ways to have a list component smoothly descend when a dropdown menu is activated

What is the best way to establish a default translation setting in i18n for Nuxt.js?

Issue with Bootstrap 5: Mobile Menu Failure to Expand

Offering various language options on a website determined by the URL

Make a copy of an array and modify the original in a different way

Inquiries regarding node.js

Applying Media Queries Based on Element Height

Handling typeError in Vue.js JavaScript filter for object manipulation

I managed to pass an array of data to the client using EJS, but I encountered an issue trying to access the array on the client side after adding an index value

Error: Attempting to access property 'question' of an undefined value

Utilize selenium IDE to retrieve a specific portion of text and save it as a variable

Differences between using Array.from and a for loop to iterate through an array-like object

Troubleshooting: Bootstrap 5 Submenu Dropdown Fails to Expand

How can I save files to the ~/Documents directory using Node.js on my Mac computer?