Working with Buefy in shadow dom

[JulienParis]

Hi!

Thanks a lot for this project, I'm currently using a lot :)

My problem is I can't figure out how to make it work with Buefy using the shadow mode. I have a repo set up here, but without the Buefy styles as soon I turn on the shadow: true option for vue-custom-element.

I checked the example set with Vuetify but Buefy plugin doesn't seem to follow the same pattern when installed.

Does anyone have a working exemple of vue-custom-element using Buefy as a shared framework between components ?

[karol-f]

Hi, unfortunately this library is no longer maintained (as Vue prepared built-in solution).

If you use shadow: true option you will have to pass shadowCss with styles that you want to have in shadowDom. You can import that styles e.g. using Webpack loaders - import someStyles from '!raw-loader!some-library/syles.css';

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

[JulienParis]

Hi @karol-f !

Thanks a lot for your quick response. Using your advice I found a way to make it work, perhaps not in the optimal way we could think of but it kinda does the trick (even for the material design fonts).

I explained all the process and workarounds in the repo's readme, but to be short even if I know vue-custom-element is no longer maintained I wanted to test custom element with Buefy. And Buefy does not support Vue3. This is why I still rely on your library (and glad to do so).

You'll see the running app here, I'd be happy to have your comment on this little exercise :)

[karol-f]

Great, thank you for the example.