I’ve been posting about how you can make lots of HTML pages and leverage navigations over in-page, JS-dependent interactions .

Now I’m gonna post another example.

On my icon sites, I have a little widget that allows you to resize the icons you’re looking at.

Previously, I implemented this functionality as a web component that looked something like this:

< icon-list size = "md" > < a href = "" > < img src = "" width = "128" height = "128" /> </ a > < a href = "" > < img src = "" width = "128" height = "128" /> </ a > <!-- more --> </ icon-list >

The size attribute corresponded to an enumeration like sm | md | lg | xl which mapped to actual pixel dimensions like 64×64 or 512×512.

When the little widget was clicked to render icons at a different size, JavaScript changed the size attribute on the <icon-list> custom element. From there, the web component’s JS took over changing the dimensions of the children <img> elements, their src attributes, etc.

It all worked pretty well.…