Lack of styling during the development of a Vue web component

Question

Lack of styling during the development of a Vue web component

During the development of a Vue web component, I encountered an issue where the CSS styling was not being applied to the web component itself, but instead added to the head of the document. This resulted in the style being ignored within the shadow DOM. To address this, I wrapped the web component in my main.js file like so:

import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import MyWebComponent from './components/MyWebComponent';

const WrappedElement = wrap(Vue, MyWebComponent);

window.customElements.define('my-web-component', WrappedElement);

Despite these efforts, the CSS rules within the style tags continued to have no effect.

Interestingly, when I built the application for production, the styles were properly added to the web component. The command I used for wrapping during production build was:

vue-cli-service build  --target wc --name my-web-component ./src/components/MyWebComponent.vue

I am now wondering if there is a way to achieve the same result using vue-cli-service serve.

For reference, here is a link to an example repository: https://github.com/snirp/vue-web-component

After some investigation, I suspect that my problem may be related to this particular issue. While the provided workarounds are confusing to me, I would greatly appreciate a more straightforward solution.

css vue.js vuejs2 web-component

Answer 1

Answer №1

After reviewing the GitHub issue provided, it appears that the recommended solution involves adjusting the shadowMode setting in both the vue-loader and vue-style-loader. It's worth noting that by default, shadowMode is set to false within a Vue CLI project, but this can be modified through the vue.config.js file.

To identify which loaders require changes, the Webpack configuration can be inspected with the following command:

# execute at the root of the project
vue inspect

The inspection results display multiple loader configurations where shadowMode: false is specified:

/* config.module.rule('css') */
{
  test: /\.css$/,
  oneOf: [
    /* config.module.rule('css').oneOf('vue-modules') */
    {
      resourceQuery: /module/,
      use: [
        /* config.module.rule('css').oneOf('vue-modules').use('vue-style-loader') */
        {
          loader: 'vue-style-loader',
          options: {
            sourceMap: false,
            shadowMode: false  // <---
          }
        },
        /* ... */
      ]
    },
    /* ... */

A comprehensive list of Webpack loader configs featuring shadowMode: false:

List of loader configurations...

To address this, updating the configurations to have shadowMode: true in the vue.config.js file can be achieved using this code snippet:

Vue.configurations('/vue.config.js', (configs) => {
  const updatedConfigs = [...];  // Insert updated configurations here
  
  updatedConfigs.forEach((config) => {
    if (config.shadowMode === false) {
      config.shadowMode = true;
    }
  });
});

By incorporating the above script into your project's

<projectroot>/vue.config.js

, you will enable Shadow CSS during development mode. Refer to this link for more details.

Answer 2

After reviewing the GitHub issue provided, it appears that the recommended solution involves adjusting the shadowMode setting in both the vue-loader and vue-style-loader. It's worth noting that by default, shadowMode is set to false within a Vue CLI project, but this can be modified through the vue.config.js file.

To identify which loaders require changes, the Webpack configuration can be inspected with the following command:

# execute at the root of the project
vue inspect

The inspection results display multiple loader configurations where shadowMode: false is specified:

/* config.module.rule('css') */
{
  test: /\.css$/,
  oneOf: [
    /* config.module.rule('css').oneOf('vue-modules') */
    {
      resourceQuery: /module/,
      use: [
        /* config.module.rule('css').oneOf('vue-modules').use('vue-style-loader') */
        {
          loader: 'vue-style-loader',
          options: {
            sourceMap: false,
            shadowMode: false  // <---
          }
        },
        /* ... */
      ]
    },
    /* ... */

A comprehensive list of Webpack loader configs featuring shadowMode: false:

List of loader configurations...

To address this, updating the configurations to have shadowMode: true in the vue.config.js file can be achieved using this code snippet:

Vue.configurations('/vue.config.js', (configs) => {
  const updatedConfigs = [...];  // Insert updated configurations here
  
  updatedConfigs.forEach((config) => {
    if (config.shadowMode === false) {
      config.shadowMode = true;
    }
  });
});

By incorporating the above script into your project's

<projectroot>/vue.config.js

, you will enable Shadow CSS during development mode. Refer to this link for more details.

Answer 3

Answer №2

A revamped solution inspired by @tony19's initial answer, incorporating a script to dynamically set shadowDom to true for all components without the need for manual listing.

function applyShadowCss(config) {
  const configs = [
    config.module.rule('vue').use('vue-loader'),
  ];

  // Identifying common rule sets obtained from `vue inspect`
  const ruleSets = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus'];
  const ruleNames = ['vue-modules', 'vue', 'normal-modules', 'normal'];

  ruleSets.forEach((ruleSet) => {
    if (config.module.rules.store.has(ruleSet)) {
      ruleNames.forEach((rName) => {
        if (config.module.rule(ruleSet).oneOfs.store.has(rName)) {
          if (config.module.rule(ruleSet).oneOf(rName).uses.store.has('vue-style-loader')) {
            configs.push(config.module.rule(ruleSet).oneOf(rName).use('vue-style-loader'));
          }
        }
      });
    }
  });

  // Setting build mode based on configuration
  if (!process.env.BUILD_MODE) {
    process.env.BUILD_MODE = config.store.get('mode');
  }

  // Applying shadowMode property to each option object in configs array
  configs.forEach((c) => c.tap((options) => {
    options.shadowMode = true;
    return options;
  }));
}

// Exporting module with customized CSS settings
module.exports = {
  css: {
    extract: false
  },
  chainWebpack: (config) => {
    applyShadowCss(config);
  },
}

Answer 4

A revamped solution inspired by @tony19's initial answer, incorporating a script to dynamically set shadowDom to true for all components without the need for manual listing.

function applyShadowCss(config) {
  const configs = [
    config.module.rule('vue').use('vue-loader'),
  ];

  // Identifying common rule sets obtained from `vue inspect`
  const ruleSets = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus'];
  const ruleNames = ['vue-modules', 'vue', 'normal-modules', 'normal'];

  ruleSets.forEach((ruleSet) => {
    if (config.module.rules.store.has(ruleSet)) {
      ruleNames.forEach((rName) => {
        if (config.module.rule(ruleSet).oneOfs.store.has(rName)) {
          if (config.module.rule(ruleSet).oneOf(rName).uses.store.has('vue-style-loader')) {
            configs.push(config.module.rule(ruleSet).oneOf(rName).use('vue-style-loader'));
          }
        }
      });
    }
  });

  // Setting build mode based on configuration
  if (!process.env.BUILD_MODE) {
    process.env.BUILD_MODE = config.store.get('mode');
  }

  // Applying shadowMode property to each option object in configs array
  configs.forEach((c) => c.tap((options) => {
    options.shadowMode = true;
    return options;
  }));
}

// Exporting module with customized CSS settings
module.exports = {
  css: {
    extract: false
  },
  chainWebpack: (config) => {
    applyShadowCss(config);
  },
}

Lack of styling during the development of a Vue web component

Answer №1

Answer №2

Similar questions

Is there a way to adjust the font color when the expiration date passes?

Tips for evenly distributing list elements in HTML without using whitespace

When a link is clicked, it quickly blinks or flashes on the screen

Leverage JavaScript or CSS to create a paper button without the ink effect

What is the method to fetch CSS properties in relative units like percentages and ems using the .css() function with the selector "$("selector")"?

Storing arrays of objects in Laravel involves creating models, defining relationships between them,

Add content to the beginning of the input with the assistance of bootstrap. However, ensure that when utilizing "form-group row", the content is shifted

Vue.js tutorial: Disabling button dynamically based on empty data array

Encountered a problem resolving the asynchronous component rendering with View-Router

Could someone lend a hand in getting the X to align properly on this div? I've been struggling with it for ages and just can't seem to crack

HTML/CSS: What could be causing the iframe to not scroll properly?

Is it possible to incorporate Google icons within Freemarker?

Is there a way to eliminate the legend symbol for just one legend in Highcharts?

Aligning SVG clipping path using CSS

Is it possible to seamlessly incorporate a square image into a bootstrap background image slider without having to crop the image?

Adjusting the height of a div based on the height of the window

Issue with Hover behavior not being implemented on Android Webview

Iconic Side Navigation with collapsed button malfunctioning due to negative positioning

Is there a way to customize the hover effect on this navigation link in Bootstrap that includes a span and an icon from Bootstrap?

manipulating child element's innerHTML with javascript