Container Queries with the <watched-box> Custom Element

Heydon Pickering has created <watched-box>:

I wanted a simple, declarative container queries solution, and here it is:

• ❤ Custom Element + ResizeObserver
• 🥣 Use and mix together any CSS length units
• 🖼 Orientation supported
• 🧚‍♀️ ≅1.5KB minified

Once imported you can use it as follows:

<watched-box widthBreaks="70ch, 900px" heightBreaks="50vh, 60em">
  <!-- HTML and text stuff here -->
</watched-box>

<watched-box> will then automatically add the proper classes:

• Less than or equal to the supplied width: w-lte-[the width]
• Greater than the supplied width: w-gt-[the width]
• Less than or equal to the supplied height: h-lte-[the height]
• Greater than the supplied height: h-gt-[the height]

<watched-box> →