Skip to content

v0.11.0 — room in the dialog for the host's own chrome

Choose a tag to compare

@NiKrause NiKrause released this 22 Aug 10:52
· 31 commits to main since this release
836b46e

Additive against 0.10.0. Nothing in the public surface moved, so upgrading is a version bump.

Room in the dialog for the host's own chrome

Moving the first app onto <qr-intro> is what the shared dialog was for, and attempting it is what showed the element could not take it. simple-todo's introduction carries a language switch and a view switch beside its title, an explicit Close button, and — in its technical view — a verdict with a link in it. Four things, none of them the transport's business, and none with anywhere to go. Adopting the element meant deleting all four: a worse dialog in exchange for a tidier dependency graph.

Three named slots, empty for everyone who does not fill them:

slot where
header beside the title
advice directly under the verdict
footer beside "do not show again"
<qr-intro>
  <p>What this app is for.</p>
  <language-switcher slot="header"></language-switcher>
  <p slot="advice">Same network works. For the internet, <a href="">a VPN</a>.</p>
  <button slot="footer">Close</button>
</qr-intro>

advice is the one that mattered. A string table cannot hold a link, and that is deliberate: the tables are read with resolveText and written to textContent, which keeps an interpolation habit out of the place that later gets pointed at a user-supplied string. So advice needing markup is markup the host writes — and it goes under the verdict it follows from, because advice under a verdict it does not follow is advice for a different situation.

footer exists because the × in the corner is a close, not a confirmation, and an introduction that ends in a decision needs somewhere for the button. The footer now wraps and spaces its halves, since a translated label plus a button does not fit on one phone line.

Two tests cover it: where each slot's content is assigned — placement being the whole point — and that an element filling none of them has no assigned nodes at all, so an unused seam costs no gap and no empty node for a stylesheet to know about.