Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/vuejs/core/issues/12439 below:

SSR hydration errors when combining inline styles with v-bind() in CSS · Issue #12439 · vuejs/core · GitHub

3.5.13

Reproduction playground

1. Ensure SSR is enabled in the reproduction

2. In PageBlock.vue we initialize two props, color and backgroundColor

3. The color prop is bound to the element via inline :style

4. Use v-bind in the style block to set the background-color property, set to the value of the backgroundColor prop

5. Notice the hydration error in the console shown below.

   - rendered on server: style="color:#000;"
   - expected on client: style="color:#000;"

6. Also notice that the generated CSS Custom Property for the backgroundColor value is not exposed in the hydration error (meaning I would expect to see --a4f2eed6-backgroundColor: lightgray; in the hydration error as well)

No hydration errors should be present when utilizing both inline style bindings and v-bind in CSS.

The inline style properties should be resolved before render to prevent hydration errors to produce the final HTML, with both the inline color style as well as the generated CSS custom property binding:

<div class="block" style="color: rgb(0, 0, 0); --a4f2eed6-backgroundColor: lightgray;" data-v-7ba5bd90=""
  data-v-a4f2eed6="">
  <div data-v-7ba5bd90="">Block One</div>
  <div class="block" style="color:#000;" data-v-a4f2eed6="">
    <div data-v-7ba5bd90="">Block Two</div>
  </div>
</div>

The inline style binding that is produced in the HTML appears to differ between server and client when the inline styles are merged with the v-bind in CSS rules.

No response

The interesting piece is not only is the hydration error occurring, but comparing the output diff between server and client appears to show the actual rendered content is identical in this particular case.

- rendered on server: style="color:#000;"
- expected on client: style="color:#000;"

In addition, the CSS custom property binding is not shown here in the client render, meaning I would expect to see --a4f2eed6-backgroundColor: lightgray; on the client line above.

In more complex examples, the output appears to actually be different depending on how the inline styles are computed.

(This issue is similar to, but different, from #12434)

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4