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

Troubleshooting a jQuery carousel: How can I prevent the thumbnails from automatically moving forward?

Why isn't the show/hide feature in Jquery functioning properly?

Alert: Parser error in JSONP!

Fetching Data from Response Headers in Angular 4.3.3 HttpClient

A mistake has been identified: The object could potentially be 'null'. TS2531 for window.document

Access the Express server by connecting to its IP address

Exploring the possibilities of JavaScript within the IntelliJ REST client

What is the best way to include JSON values for specific keys using JavaScript, jQuery, or AngularJS?

Extract core object from array of objects with lodash or javascript

What is the best way to create a "tile-based board" for this game?

Guide on creating a Docker image from a Vue.js application and deploying it to a Nexus repository using GitLab's CI/CD pipeline

The error message "ng: command not found" popped up despite successfully installing the latest @angular/cli using npm linking

Utilizing Vue and Vuex to execute Axios operations within a store module

Adjusting the position of a stationary element when the page is unresponsive and scrolling

Vue - Ways to securely integrate Firebase config data into main.js

Dropdown menu not populating with options in AngularJS ngOptions

Can you provide guidance on decompressing SVGZ files using JavaScript?

There is a potential risk of NextResponse.json file compromising the integrity of JSON

JavaScript Function for Finding the Time Difference Between Two Dates (in Years, Days, Hours, or Less than One Hour)

What methods can be used to identify the pattern entered by the user for data types such as `Int`, `VarChar`, `