You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Assume two custom components parent and child. In parent's template, use child with inline styles <child :style="styleComputed"></child>
Render in browser
Render on server
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?
The text was updated successfully, but these errors were encountered:
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
Vue.js version
2.0.3
Reproduction Link
http://jsfiddle.net/jason_sanjose/0aat08kh/1/
Steps to reproduce
parent
andchild
. Inparent
's template, usechild
with inline styles<child :style="styleComputed"></child>
What is Expected?
Inline styles should work consistently for browser and server environments.
What is actually happening?
Server does not render
:style
attribute onchild
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.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 inchild
should be accepted?The text was updated successfully, but these errors were encountered: