search

ascorbic / unpic-img

Multi-framework responsive image component
https://unpic.pics
1.26k stars 44 forks source link

HTML Web Component #405

Open oskarrough opened 8 months ago

oskarrough commented 8 months ago

The web component version of unpic currently requires markup like this

<unpic-img
  src="https://cdn.whatever.com/bath_grande.jpg"
  layout="constrained"
  width="{800}"
  height="{600}"
  alt="A lovely bath"
></unpic-img>

I'd like to discuss an alternative markup:

<unpic-img layout="constrained">
  <img
    src="https://cdn.whatever.com/bath_grande.jpg"
    alt="A lovely bath"
    width="800"
    height="600">
</unpic-img>

The first advantage here is that it'll work without javascript. The idea is to enhance the <img> element instead of trying to replace it. The unpic-img element would take care of any non-standard attributes and modify the child image accordingly.

This would break->change the current API. Could consider making another web component instead of breaking the current one made with LitElement.

See https://www.zachleat.com/web/a-taxonomy-of-web-component-types/#html-web-components and https://adactio.com/journal/20618 for more thoughts on this.

What do you think?

ascorbic commented 8 months ago

Thanks. I saw both of those posts and think this would be a good idea. We already have both webc and Lit, so I'm not sure what the best approach would be. I think a "plain" HTML web component might be the way

oskarrough commented 7 months ago

Yes, a plain one makes sense to me, too. Don't believe Lit is needed, since it's really about rendering a single element and it looks like you have all the prop logic extracted already.