[Question] Is it possible to add scss styles to the shadow dom?

[supproduction]

Is it possible to add scss styles to the shadow dom?

Like vue-web-component-wrapper at turned on appropritate shadow dom options in the 'vue-loader' and 'vue-style-loader'?

[karol-f]

I didn't test it but should be possible:

import styles from 'styles.scss'

And then put it to shadowCss option using (if needed) raw webpack loader.

Regards

[supproduction]

But in this case, when I have reused component

import SprykerButton from '../spryker-button/spryker-button.vue';

    @Component({
        components: {
            SprykerButton
        }
    })

it has imported without styles. Do you have workaround to this?

[karol-f]

Hi, currently You can import CSS/SCSS file using different Webpack loaders and put it into shadowCss option.

If You want to get styles from SFC (Single File Components), I currently don't know how to do it.
There was some query option in vue-loader when importing Vue files to get only styles but probably it was removed. I'll try to check.

[supproduction]

I resolved importing css/scss, but while we are importing one component into another, there are no styles for imported compoent. Ок, check it please. Cause your plugin looks more promising then web-component-wrapper.

Maybe should we reopen this topic in this case?

[karol-f]

Can You please prepare example repository or more in depth example of the issue with importing scss files?

[supproduction]

Yes, please https://github.com/supproduction/vue-example

[karol-f]

From a quick look, for styles inside other components (import as standard vue component) maybe use same technique as You import .ts file - <style src="./style.css"></style> inside.vue file?

[supproduction]

In this case vue-loader give an error when I am trying to turn on shadowDomMode

[supproduction]

1. slots are broken and it works without styles if shadowCss turned off

Vue.customElement('spryker-button', new SprykerButton().$options, {
    shadow: true
});

2. When I am triyng turn on shadowMode at the loaders a have an errors
   

[DrMabuse23]

Yes, please https://github.com/supproduction/vue-example

url no longer available ?

[DrMabuse23]

// [read](https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200)

function enableShadowCss(config) {
  const configs = [
    config.module.rule('vue').use('vue-loader'),
    config.module.rule('css').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('css').oneOf('vue').use('vue-style-loader'),
    config.module.rule('css').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('css').oneOf('normal').use('vue-style-loader'),
    config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('postcss').oneOf('vue').use('vue-style-loader'),
    config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('postcss').oneOf('normal').use('vue-style-loader'),
    config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('scss').oneOf('vue').use('vue-style-loader'),
    config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('scss').oneOf('normal').use('vue-style-loader'),
    config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('sass').oneOf('vue').use('vue-style-loader'),
    config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('sass').oneOf('normal').use('vue-style-loader'),
    config.module.rule('less').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('less').oneOf('vue').use('vue-style-loader'),
    config.module.rule('less').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('less').oneOf('normal').use('vue-style-loader'),
    config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('stylus').oneOf('vue').use('vue-style-loader'),
    config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('stylus').oneOf('normal').use('vue-style-loader'),
  ];
  if (!process.env.BUILD_MODE) {
    process.env.BUILD_MODE = config.store.get('mode');
  }
  configs.forEach(c => c.tap(options => {
    if (options && options.shadowMode) {
      options.shadowMode = true;
    }
    return options;
  }));
}

module.exports = {
  css: {
    modules: true
  },
  // https://cli.vuejs.org/guide/webpack.html#chaining-advanced
  chainWebpack: config => {
    enableShadowCss(config);
    config.resolve.symlinks(false)
  },
}

i do this for enable shadow dom in the vue.config.js

[supproduction]

@DrMabuse23 Hello. Sorry for delay.
Actually I am using webpack vue compiler not vue cli.
I have created another one repo https://github.com/supproduction/vue-custom-element-shadow-dom-issue
I hope it will help you