Is there a way to isolate the Vue Component Sass/CSS in the shadow dom

[shaydoc]

I have some cases where peeps are using deep selectors that impact styles, i know this is generally bad, but with Custom Element we obviously get the shadow boundary. would be really cool if you could tell vue custom element to include the Vue Components onwn style in the shadow dom

e.g.

<template>
....
</template>
<script>
....
</script>
<style shadow lang="scss" />

[karol-f]

Hi, thanks for the issue.

Unfortunately it's not possible like it's shown on your example - that would require vue-loader changes.

You can however isolate styles manually, like shown on Example options usage paragraph, below https://github.com/karol-f/vue-custom-element#options :

import MyElement from './MyElement.vue';

Vue.customElement('my-element', MyElement, {
  shadow: true,
  shadowCss: `
  .card {
     background-color: blue;
  }`
});

Keep in mind that Shadow Dom is not easily polyfillable so if you target older browsers you have to manually add quite big polyfills and live with some edge cases.

Regards!

[shaydoc]

thanks @karol-f appreciate you taking the time, this was an aspiration more than anything....
what i would like to do with shadowCss:... is pass in a generated css file If you know what i mean

[karol-f]

@shaydoc So maybe import it (if using Webpack or vue-cli) and add it to shadowCss.

Not tested code:

import myStyles from 'css-loader!./myStyles.css'; // or 'to-string-loader!css-loader!./myStyles.css' 
import MyElement from './MyElement.vue'

Vue.customElement('my-element', MyElement, {
  shadow: true,
  shadowCss: myStyles.toString(),
});

https://github.com/webpack-contrib/css-loader#tostring

[shaydoc]

oh boy, great idea, will certainly look at this option @karol-f 🥇