Open
Description
Description
The occurrence of shiki-twoslash
showing hybration mismatch
is due to the inconsistency of popper-id
:
Akryum/floating-vue#1006
However, I haven't seen any fix plans for this from floating-vue
at the moment. In my theme repository, I made modifications to floating-vue
using pnpm patch
as a temporary solution.
diff --git a/dist/floating-vue.mjs b/dist/floating-vue.mjs
--- a/dist/floating-vue.mjs
+++ b/dist/floating-vue.mjs
@@ -946,6 +946,7 @@ function mt(e, t, o, i, s, r) {
const p = P("ResizeObserver");
return f(), T("div", {
id: e.popperId,
+ 'data-allow-mismatch': '',
ref: "popover",
class: J(["v-popper__popper", [
e.themeClass,
@@ -966,7 +967,7 @@ function mt(e, t, o, i, s, r) {
position: e.result.strategy,
transform: `translate3d(${Math.round(e.result.x)}px,${Math.round(e.result.y)}px,0)`
} : void 0),
- "aria-hidden": e.shown ? "false" : "true",
+ "aria-hidden": e.shown || e.autoHide ? "false" : "true",
tabindex: e.autoHide ? 0 : void 0,
"data-popper-placement": e.result ? e.result.placement : void 0,
onKeyup: t[2] || (t[2] = je((a) => e.autoHide && e.$emit("hide"), ["esc"]))
Reproduction
Used Package Manager
pnpm
System Info
-