Hydration Error / Warning with test sites #2627
Description
Please confirm that you have searched existing issues in the repo
Yes, I have searched the existing issues
Any related issues?
Tell us about your environment
Win 11
MarkBind version
5.5.3
Describe the bug and the steps to reproduce it
Test Sites have hydration Issues.
This could be related to <span> and invalid HTML rendered. And also special tags. Requires further investigation.
A
<div>is a block-level element, whereas a is an inline element. When wrapping block-level elements (such as<p>, <table>, <div>, etc.) inside a<span>, it results in invalid HTML. This can cause hydration issues in frameworks like Vue, React, and Svelte because:
- DOM Mismatch: The server might render valid block-level elements, but the browser may restructure them due to invalid nesting. This leads to hydration errors because the expected DOM tree differs from the actual one.
- Unexpected CSS Behavior: Block-level elements inside an inline may not inherit expected styles, leading to layout inconsistencies.
- Breaking Semantic HTML: Wrapping blocks in violates HTML rules, which could lead to accessibility and SEO issues.
test_site
test_site_special_tags
test_site_table_plugin
We could further investigate this issue once Vue is migrated to Vue 3
Not sure if it is entirely relevant since these test sites aren't technically meant to be served. However, the fact that there is a hydration issue / DOM mismatch causing Vue to bail and conduct full client side render could also mean that what is being tested and verified is not exactly what an end user would see on their browser - which would then also be an issue.
Investigation on this would be good.
To replicate:
cd .\packages\cli\test\functional\test_site\markbind serve -d- browser developer console
Expected behavior
No hydration issues, no bailing of hydration and client side rendering for test sites.
Anything else?
No response