search

giscus / giscus-component

Component library for giscus, a comment system powered by GitHub Discussions.
https://giscus-component.vercel.app
MIT License
315 stars 25 forks source link

Handle layout shift #74

Closed winston0410 closed 2 years ago

winston0410 commented 2 years ago

Is it possible to prevent layout shift of loading the frame by setting width and height initially? Right now the component doesn't accept width or height.

laymonage commented 2 years ago

I suppose you could wrap the element with a div that has a min-height of at least 150px (default height in the HTML spec) and width of 100%? The web component has width: 100% in it and the height is determined by the height of the contents, so you can create an element that wraps it to whatever width and height you like with {min,max}-{width,height}.

laymonage commented 2 years ago

You can now style the iframe directly by using ::part(iframe)^1. Example:

https://github.com/giscus/giscus-component/blob/a0efc63b3c6f0804a377366c6615ec0aa8a2ffda/demo/react/src/styles.css#L1-L5