<img> & <details>


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.


As for <details>, it uses the “shadow DOM” subsystem (whereby an elements real children are hidden from normal JavaScript) with two “slots”, one for the <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.

The <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.