Playing with interest invokers

This afternoon, while writing my previous post on teaching HTML, I thought it would be cool to test out how interest invokers worked. Here's a quick post on how I built a first prototype, showing previews for internal links on my blog.

Obviously I had internal links to other posts already, and to specific comments. So step 1 was modifying all internal links, and adding an interestfor attribute. Since all HTML rendering goes through the same render loop, that was an easy fix.

All <a href="/log/2026/05/view-transitions-for-form-interactions" interestfor="preview">internal links</a> got upgraded.

With a <a href="/log/2026/05/view-transitions-for-form-interactions#comment-5" interestfor="preview">simple attribute</a>.

Step 2 was adding the popover element, which would just sit and wait for anything to happen.

<aside popover="hint" id="preview"></aside>

Step 3: sprinkle in some JavaScript, in a new <script type="module">. The non-standard and experimental interest event is quite handy for this.

const preview = document.getElementById('preview');
preview.addEventListener('interest', async function(ev) {
    preview.innerHTML = 'Loading…';
    const response = await fetch(ev.source.href);
    const html = await response.text();
    const parser = new DOMParser();
    const responseDOM = parser.parseFromString(html, 'text/html');
    if (ev.source.hash) {
        preview.innerHTML = responseDOM.querySelector(ev.source.hash).outerHTML;
    } else {
        preview.innerHTML = responseDOM.querySelector('h1').outerHTML + responseDOM.querySelector('footer').outerHTML + responseDOM.querySelector('p').outerHTML;
    }
});

Step 4, adding a bit of CSS.

[popover] {
	padding: 1em;
	border: 1px solid;
	position-area: bottom;
	color: inherit;
	max-inline-size: 40em;
}

All supported in Chromium based browsers for now. And it's a progressive enhancement, so nothing breaks in other browsers. Apple has indicated they don't really like this idea, so things might still change. It's complicated.

Obviously this needs way more love and attention, but for a quick prototype—one of my goals—on a Sunday night, this isn't too bad! And this opens up more research opportunities into popover anchor positioning, nested interest invokers, @starting-style, nice UX and maybe how this can play along with speculation rules and caching.