Put simply, the
<img> tag wraps a special “renderer” it provides to the “Render Tree” (the Render Tree is what gets laid out and drawn to the screen). The ImageRenderer in turn retrieves the
href attribute from it’s
<img> tag and (via a RenderImageResource) tells the HTTP cache to request it.
It’ll get notified as it downloads and will render whatever it has to the screen via the system vector graphics library (for WebKitGTK this is Cairo), or it’ll draw the alt text and broken image icon.
<summary> and another for the rest of the text. Shadow DOMs are widely used elsewhere (e.g. form inputs, playback controls), but I don’t know about shadow DOM slots.
<summary> tag (if it isn’t present, a default one is autogenerated) handles events and tells its containing
<details> to adjust it’s shadow DOM to add and remove that text.