NO BUG: Image Element: custom attributes adds attribute to child img element

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Noticed today when adding custom attributes to images that it inserts the attribute on the actual “img” tag, which works. However, since this is a nested element within a “figure element”, we’re unable to add the custom attribute to the parent “figure”.

The issue is with having to use overflow: clip on the “figure” for rounded borders. Applying something to the “img” using custom attributes gets cropped out due to the overflow rule in the parent.

  • Is this expected behavior?
  • Is there a way to target the parent or wrapper with custom attributes?

Screen Shot 2023-10-05 at 5.06.48 PM
Screen Shot 2023-10-05 at 5.06.48 PM2352Ă—538 197 KB

2

Hi,
Thanks so much for your report!

Attributes and styles are added either to the wrapper, or to the relevant element. Of course, depending on the situation and different requirements, this may not always work automatically.

But the workaround in your case is quite simple: instead of setting the figure tag in the image element, wrap the image manually with a div and set its HTML tag to figure. This way, you can address each element individually and specifically.

Best regards,
timmse

1 Like
3

Thanks for confirming. I figured that was the default case. Solved it via CSS with :contains(data-attribute),etc.