Move slot attribute to <picture> element?

[tylersticka]

On my personal blog, I have a few posts that use my company's image comparison web component. Here's some simplified markup for that:

<image-compare>
  <img slot="image-1" alt="Alt Text" src="image-1.jpg" />
  <img slot="image-2" alt="Alt text" src="image-2.jpg" />
</image-compare>

When the Image Transform plugin processes these images with multiple formats, it creates <picture> elements (🎉). But there's a small problem with that in this particular case:

<image-compare>
  <picture>
    <source type="image/webp" srcset="image-1.webp 1920w">
    <img slot="image-1" alt="Alt Text" src="image-1.jpg" />
  </picture>
  <picture>
    <source type="image/webp" srcset="image-2.webp 1920w">
    <img slot="image-2" alt="Alt Text" src="image-2.jpg" />
  </picture>
</image-compare>

The attributes on the <img> element stick with said element, which makes sense 99% of the time. But in this case, the web component breaks unless the slot attribute is on the <picture> itself (<picture slot="image-1">).

I couldn't see a way to specify which attributes should stick with <img> versus <picture>. I tried adding a <picture> element with a slot ahead of time, but it looks like that won't be a feasible fix until/unless #214 is addressed. In the meantime I'm going to put eleventy:ignore on these for now, but figured I'd create an issue. ❤️