CSS and Scoped CSS inside .vue files

[piyushchauhan2011]

Hi @karol-f , I tried vue-custom-element and found that, if we define css inside .vue component

e.g.

<style scoped>
h1 {
  color: white;
}
</style>

<template>
  <div class="card">
    <h1>My Element</h1>
  </div>
</template>

It's not get applied if we use shadow: true property during customElement creation.

I was wondering if this default behaviour or something which needs to be supported in future releases ?

Also, since the styles are added in head which is outside of shadowDom, it won't be applied automatically until provided in shadowCss property as string . I believe then, something needs to be added in webpack to properly apply it to shadowDom ?

Just dumping ideas :D , maybe someone can create a sample repo for trying above out!

[piyushchauhan2011]

Forgot to mention use-case, since I already had some components with scoped css, I wanted to expose them as customElements but all the css needs to supplied in shadowCss property which I need to manually copy paste. Don't know how to get around it!

[piyushchauhan2011]

Just came across this, css and scoped css inside this one https://github.com/trusktr/vue-web-component works correctly, don't know what's different ? @karol-f @trusktr

[karol-f]

Hi, currently the only way is to use shadowCss (https://github.com/karol-f/vue-custom-element#options) due to fact that vue-custom-element is not integrated with *.vue files.

In the near future you will have vue-cli official support for basic Custom Elements - https://twitter.com/youyuxi/status/958461422786301957 - you might take a look at it.

Regards!

[gijo-varghese]

@karol-f if Evan you releases it, will this library be depreciated?

[karol-f]

It depends on how many use cases official implementation will cover (browser support, slots, events) but yes it can replace this one.

[gijo-varghese]

Ok. Have you tried it? I was getting full of errors. I'm building a chat widget. So confused on which library to use. This one looks pretty good

[trusktr]

@gijo-varghese Does vue-web-component work for you? (I forgot to mention in the README, you can also pass data directly to the custom element properties using v-bind's .prop modifier, will update the README soon, and I will soon update the props handling so it can check sub-types of objects and arrays using SkateJS's prop types).

[trusktr]

@piyushchauhan2011 Not sure about vue-custom-element, but vue-web-component takes the component's style and injects it into the shadow root of the component. It needed to use ShadowDOM style scoping because otherwise Vue's generated global styles would not propagate into the shadow roots.

[gijo-varghese]

@trusktr that one looks great. It's using native web components right? What about browser support? Do I need to use a Polyfill? And regarding css, it uses shadow CSS (browser support?)?

What I'm building is a chat widget. So the styles of that website shouldn't be affected on my website. And I need good browser support.

[piyushchauhan2011]

I tried https://github.com/vuejs/vue-web-component-wrapper @vue/web-component-wrapper , still the same css problem, even though "evan" mentioned module based style works, I couldn't get it to work properly. My suggestion is to go with vue-web-component for now as skatejs is older and we have more control over everything to create a customElements

Cheers 🍻 to @trusktr for creating a wrapper for vue

[gijo-varghese]

@piyushchauhan2011 vue-web-component works fine? What about browser support?

[piyushchauhan2011]

Include the polyfill from here https://cdnjs.com/libraries/webcomponentsjs @gijo-varghese and you should be good to go. For official wrapper, I had to include the sd-ce one, but es5 one will do just fine

[gijo-varghese]

@piyushchauhan2011 ok. Thanks. What about shadow CSS? Will the outer css affect the component? I want to isolate the component so that css inside the component will not be applied and outer ones will not be applied inside the component.

[piyushchauhan2011]

Should be okay, as the style problems are not there because the it's a wrapper using skatejs

[gijo-varghese]

Ok. Don't know much about skatejs. But I'll check it

[gijo-varghese]

@piyushchauhan2011 can you pls create a sample repo with all these stuff? It will be helpful for me and lot of others searching for this.

[trusktr]

@gijo-varghese This isn't a sample repo, but a tip: set up a project with Webpack+Babel, then (for now) be sure to use babel-plugin-transform-builtin-classes, which will fix compiled code not working in modern browsers. With babel-plugin-transform-builtin-classes, you do not need to use webcomponentsjs/custom-elements-es5-adapter.js (which is from custom-elements/native-shim.js).

If you have a question about ShadyCSS and style encapsulation in older browsers, it may be a more general question to ask over at webcomponents/webcomponentsjs. I've only tested this with native ShadowDOM, but presumably, if a polyfill is in place, it should work there too.

[trusktr]

then (for now) be sure to use babel-plugin-transform-builtin-classes

The upcoming Babel 7 includes this transformation by default so babel-plugin-transform-builtin-classes or custom-elements-es5-adapter.js will not be needed at all.

[trusktr]

(@karol-f Thanks for the inspiration, by the way! 😊 )

[karol-f]

@trusktr You're welcome, I'm glad that I could help. Regards! :)