:style on a custom component does not generate code using vue-server-renderer

[jasonsanjose]

Vue.js version

2.0.3

Reproduction Link

http://jsfiddle.net/jason_sanjose/0aat08kh/1/

Steps to reproduce

1. Assume two custom components parent and child. In parent's template, use child with inline styles <child :style="styleComputed"></child>
2. Render in browser
3. Render on server
4. Compare

What is Expected?

Inline styles should work consistently for browser and server environments.

What is actually happening?

Server does not render :style attribute on child

// Browser
<div style="...computed style..."/>

// Server
<div/>

As a workaround, in the child template, I've added :style to the root element and passed down a style as a prop, e.g.

<div :style="passthroughFromParent"/>

It's not obvious from the docs if <child :style="styleComputed"/> is valid code. I suppose an argument could be made that only custom properties defined in child should be accepted?

[defcc]

I think this should be considered as a bug, it causes inconsistence between client side render and server side render. I am looking into it.

AS for props not declared in child component, this is an undocumented behavior, we should document it clearly.

[HerringtonDarkholme]

Hi, style is a special module that is available to all elements and components. So I don't think it is a undeclared props issue.

There is no problem with the compiler. I print both render functions' text. They are the same.

The problem is, at runtime, every instance will have an _update, where 'style' module will patch the element. sytle module will find VNode's element and set style to it, which in this case is the div.bug.

But at server rendering, the render function h('bug') will not trigger module code, thus the bug.

It's quite hard to fix....

What about in renderStyle, inspect the parent node, if the parent node has componentOptions which indicates it is a component tag, append all styles from parent