0

I need to develop a widget IIFE library loaded through a <script src="..."></script> tag delivering some features through some UI components.

Since I have no control over the page layout and @media queries relate to the window, not to the container, I really fail to understand how to make responsive components that will adapt and look great in every situation.

Using iframes allows to overcome this issue as @media will then relate to the iframe wrapping the web-component, but iframe come with a lot of downsides.

Hence, how are Web Components made responsive without iframes ?

Syffys
  • 570
  • 5
  • 21

1 Answers1

0

Unless you have a load of time and make an UI for every possibility, and the technical ability to do that, I suggest you to simply fix limit on the integration of your component. For instance by just documenting them.

This component is made to be integrated with mobile and desktop. The UI components are made to be integrated in a 480-600px width block in HD screen, and in mobile they're made to be integrated in a 240-300px width block.

Walfrat
  • 5,363
  • 1
  • 16
  • 35
  • Thanks for helping ! This is not really an option. Now even if I could fix this kind of limit, I still have no way of setting my CSS with container breakpoints as you suggest. The only option I see would be to define 2 different components, which is a pain too – Syffys Jul 13 '21 at 13:40
  • When i say "the ui component is made to be integrated ..." I refer to the fact that the user must include your component with a manually fixed width of <..>px for a proper rendering – Walfrat Jul 13 '21 at 14:17
  • I figured... But unless I'm missing something, this doesn't change anything from the fact that there is no way to fix a single component behavior accross 2 breakpoints (mobile and HD) based on its container (or its own width). The only way what you're suggesting could work would be to fix its size for all breakpoints... This would be very inflexible and might make customers unhappy. – Syffys Jul 13 '21 at 15:00
  • Different stylesheet included acording to desktop vs mobile ? Different CSS class to put when included ? – Walfrat Jul 15 '21 at 13:04