This demo shows how ShadowQuery makes new programming patterns possible by getting you back behind the wheel. This is an extract of a real life example.

The problem: I want to display a list of several items. Each item has some initially hidden DOM attached, in this case a dialog. Rendering all that DOM takes time, even if it's invisible. The dialog can handle its own stuff, but client code must render its template and this is usually the bulk of the DOM. I want as little arcane deferred rendering logic in the client code as possible.

This demo now demonstrates a relatively simple generic dialog, that works as expected, but also optionally supports deferred rendering. In that case you give the dialog your client template. You can then hook up the handlers on your template when you get the dialog's "rendered" event (not shown in the demo).

That is a generic solution to a somewhat frustrating problem I have faced several times now. Then I usually resorted to putting the dialog at the top and having just one instance. The ShadowQuery solution is much more elegant IMHO. Most importantly: it is relatively easy to come up with that solution using ShadowQuery: that's because it's all straightforward JavaScript. I'm sure you can do the same with several other templating engines ... after taking a deep dive into how to tag JavaScript template strings for example, or otherwise dive rather deeply into your chosen framework.

And I'm pretty sure, it's simple to come up with various other solutions. E.g. a floating container of which there is only one in a given context and that is simply moved around as required. The sky is your limit.