Question: Usage with vue custom element #115

oskarrough · 2017-07-28T06:44:45Z

Is it possible to extract the scoped styles of a Vue app and pass them to https://github.com/karol-f/vue-custom-element? I see some options here http://vuejs.github.io/rollup-plugin-vue/#/en/2.3/?id=custom-handler but could not figure out how to pass it to this:

Vue.use(vueCustomElement)
Vue.customElement('my-component', MyComponent, {
  shadow: true,
  shadowCSS: `h1{color: blue}`
})

Related karol-f/vue-custom-element#17. Bonus info:, our styles are currently written as <style scoped> inside each .Vue component.

The text was updated successfully, but these errors were encountered:

oskarrough · 2017-07-29T11:38:30Z

rollup-plugin-vue already supports injecting styles with JS. They are inserted in the <head> element.

What if they were inserted inside the Vue component's root element? Then the styles would be included in the shadowDOM.

znck · 2017-07-29T13:25:28Z

I'd explore this and possibilities.

oskarrough · 2017-07-30T08:01:16Z

How would we do this? I don't have any experience with rollup plugins.

Can we prepend it to the Vue template of the root component? Does rollup have access to this anywhere?

znck · 2018-05-02T06:07:10Z

You can use {css: false} option to convert styles to import and then use postcss-plugin-css-only to get the scoped styles.

Related #184

znck added the Type: Question label Jul 29, 2017

znck closed this as completed May 2, 2018

Provide feedback