Skip to content

fix: update CSS custom properties on preview panel resize #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Huxpro merged 2 commits into from
Mar 17, 2026
Merged

fix: update CSS custom properties on preview panel resize #22

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e49ce4
fix: update CSS custom properties on preview panel resize
Huxpro Mar 17, 2026
f308c93
fix: use inline style for live --lynx-vh/--lynx-vw updates on resize
Huxpro Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions src/example-preview/components/web-iframe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,19 @@ export const WebIframe = ({ show, src }: WebIframeProps) => {
pixelWidth: Math.round(w * window.devicePixelRatio),
pixelHeight: Math.round(h * window.devicePixelRatio),
};
// @ts-ignore – update CSS custom properties for viewport-unit rewriting
lynxViewRef.current.injectStyleRules = [
`:host { --lynx-vh: ${h}px; --lynx-vw: ${w}px; }`,
];

const rule = `:host { --lynx-vh: ${h}px; --lynx-vw: ${w}px; }`;

// Set injectStyleRules for initial template load (before shadow DOM exists)
// @ts-ignore
lynxViewRef.current.injectStyleRules = [rule];

// Also set CSS custom properties directly on the host element's inline
// style for live resize updates. Inline custom properties on the host
// are inherited by shadow DOM descendants immediately.
const el = lynxViewRef.current as unknown as HTMLElement;
el.style.setProperty('--lynx-vh', `${h}px`);
el.style.setProperty('--lynx-vw', `${w}px`);
}, []);

// Set URL only after runtime is ready AND element is mounted
Expand Down
Loading