Vue-next: when i using render function, the scoped style not working

[bundlejs]

Version

3.0.0-beta.19

Reproduction link

https://codepen.io/bundlejs/pen/abdYYrQ

Steps to reproduce

use templete, the scoped style is right, but use render h(), it`s bad.

What is expected?

use render function,scoped style is working

What is actually happening?

scoped style is not working

---

"dependencies": {
    "vue": "^3.0.0-beta.19"
  },
"devDependencies": {
  "@vue/compiler-sfc": "^3.0.0-beta.19",
  "less": "^3.11.3",
  "vite": "^1.0.0-beta.11"
}

[yyx990803]

Vue 3 SFC currently doesn't support scoped styles for manually render functions, for now you have to either use templates or CSS modules.

[bundlejs]

Vue 3 SFC currently doesn't support scoped styles for manually render functions, for now you have to either use templates or CSS modules.

在vite build 之后的项目中,这个render方法并没有执行,也就没有相应的dom产生

[yyx990803]

What's the point of using render functions inside single file components? Just for <style>? Also, if it's a Vite issue, please open separate issue in Vite's repo.

[aztalbot]

I ran into the same issue. I wasn't so much surprised that it wasn't supported, more so that it seems the data-v-<scopeId> attribute on the nodes were suffixed with -s and removing the suffix was enough to apply the styles. The comment where I think this suffix is being added makes it seem like these nodes are treated as slot content, which is confusing to me. I'm sure I don't understand the logic scopes completely, so I'm probably missing something, but I guess I would expect CSS scoping of render functions to work rather than narrowly missing (not sure if this is a vue-loader or vue-next change). And yes, the only use case I can think of for render functions in SFCs is <style scoped>; which I think can make sense if most of the code base is SFCs and you have some very dynamic components you want to write as render functions and you also want style scoping but you don't want to introduce new tooling for CSS Modules.

However, it would also seem reasonable to make it very clear that <style scoped> and render functions don't work by having vue-loader show a warning if <style scoped> is used without a <template>, since there are other ways to achieve the same goal.

[gliheng]

Run into this issue recently. It's really unexpected. vue2 works well though.

[qgates]

What's the point of using render functions inside single file components?

If people could do it in vue 2 they'll continue to do so if it makes sense to them, or they're migrating a vue 2 project

[phaust]

I agree with @aztalbot.

I'd love to keep using SFCs <style scoped> section along with render functions. I have some components which have such dynamic template code (e.g. conditional event listeners and props) that using <template> would probably be a bad decision. Having all the styles encapsulated in the <style> section would keep components consistent and more readable, I think.

[soulsam480]

I also agree with @aztalbot.

Sometimes when we have a much dynamic template we need render functions.
e.g.

render() {
    return h("input", {
      type: this.options.type,
      class: this.options.className,
      placeholder: this.options.holder,
      id: this.options.id,
      value: this.modelValue,
      oninput: (e: any) => {
        this.$emit("update:modelValue", e.target.value);
      },
      list: this.options.list,
      min: this.minVal,
      onKeyUp: (e: KeyboardEvent) => {
        if (this.$props.options.handleKeyup === undefined) return;
        console.log(e);

        if (e.key !== firstCapitalize(this.$props.options.handleKeyup.modifier))
          return;

        this.$props.options.handleKeyup.method();
      },
    });
  },

Here is my case, I'm trying to implement optional key modifiers and key event handlers for an input element. This is a component and it accepts a prop with key modifier and the handler method. This is an optional prop. Everything works fine but as I need styles for this input Element, I'm in trouble for using render functions. This is a great feature but adding support for style will also add much help .

[iassasin]

Ran in same issue. It was very useful feature: SFC with render function + scoped style. Is there any plans when it will be implemented in vue3?