[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

[karol-f]

I will try to get styles as described in vue-loader docs: import style from 'source.vue?vue&type=style&index=1' https://github.com/vuejs/vue-loader/blob/master/README.md

Unfortunately end of the year don't make it easy to find spare time. Regards

[supproduction]

Ok, thanks in any case

[supproduction]

@karol-f Also pay attention to the slots - it has broken now. I reproduced it at the repo above

[ankurk91]

I was able to do it like

import PencilButton from './Button.vue';
import ButtonStyles from '!!raw-loader!sass-loader!./button.scss';

Vue.customElement('x-pencil-button', PencilButton, {
  shadow: true,
  shadowCss: ButtonStyles
});

Notice , i am chaining raw-loader with sass-loader, raw loader will return styles as string which you can pass into arguments. Notice: !! this will prevent webpack from applying other loader configured in webpack.config.js

[karol-f]

@ankurk91 thanks for sharing!

[supproduction]

@ankurk91 Yes, it works. But if we want to reuse PencilButton in the Vue ecosystem, component will be without styles. Like this

.....
components: {
        PencilButton
}
.....

[nicod-pc]

@supproduction Have you found a solution? Or why did you close it?

[karol-f]

@supproduction Have you found a solution? Or why did you close it?

What is wrong with https://github.com/karol-f/vue-custom-element/issues/191#issuecomment-569428185 ?

[nicod-pc]

What is wrong with #191 (comment) ?

Because this:

@ankurk91 Yes, it works. But if we want to reuse PencilButton in the Vue ecosystem, component will be without styles.

sounds like it doesn't solve the problem if you reuse a component as sub component.