Skip to content

Add the interesttarget attribute #11006

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
+223 −3
Draft

Add the interesttarget attribute #11006

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9e40cb6
Add the interesttarget attribute
foolip Feb 6, 2025
876d308
Address the easy review feedback
foolip May 14, 2025
183aa4d
Add additional pseudo-classes
foolip May 15, 2025
966e2ef
make InterestEvent non-composed
foolip May 15, 2025
efa052c
add interesttarget attr description
foolip May 15, 2025
c43b498
Make interest tri-state none/partial/full
foolip May 20, 2025
ff16fdc
Fix TODOs
foolip May 20, 2025
c22f396
Define :target-of-interest / :target-of-partial-interest
foolip May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
226 changes: 223 additions & 3 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21795,6 +21795,7 @@ interface <dfn interface>HTMLDivElement</dfn> : <span>HTMLElement</span> {
<dd><code data-x="attr-hyperlink-hreflang">hreflang</code></dd>
<dd><code data-x="attr-hyperlink-type">type</code></dd>
<dd><code data-x="attr-hyperlink-referrerpolicy">referrerpolicy</code></dd>
<dd><code data-x="attr-interesttarget">interesttarget</code></dd>
<dt><span
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
<dd>If the element has an <code data-x="attr-hyperlink-href">href</code> attribute: <a
Expand Down Expand Up @@ -21823,7 +21824,8 @@ interface <dfn interface>HTMLAnchorElement</dfn> : <span>HTMLElement</span> {

// <a href="#HTMLAnchorElement-partial">also has obsolete members</a>
};
<span>HTMLAnchorElement</span> includes <span>HTMLHyperlinkElementUtils</span>;</code></pre>
<span>HTMLAnchorElement</span> includes <span>HTMLHyperlinkElementUtils</span>;
<span>HTMLAnchorElement</span> includes <span>InterestInvokerElement</span>;</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLAnchorElement</code>.</dd>
</dl>
Expand Down Expand Up @@ -42070,6 +42072,7 @@ interface <dfn interface>HTMLMapElement</dfn> : <span>HTMLElement</span> {
<dd><code data-x="attr-hyperlink-ping">ping</code></dd>
<dd><code data-x="attr-hyperlink-rel">rel</code></dd>
<dd><code data-x="attr-hyperlink-referrerpolicy">referrerpolicy</code></dd>
<dd><code data-x="attr-interesttarget">interesttarget</code></dd>
<dt><span
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
<dd>If the element has an <code data-x="attr-hyperlink-href">href</code> attribute: <a
Expand All @@ -42096,7 +42099,8 @@ interface <dfn interface>HTMLAreaElement</dfn> : <span>HTMLElement</span> {

// <a href="#HTMLAreaElement-partial">also has obsolete members</a>
};
<span>HTMLAreaElement</span> includes <span>HTMLHyperlinkElementUtils</span>;</code></pre>
<span>HTMLAreaElement</span> includes <span>HTMLHyperlinkElementUtils</span>;
<span>HTMLAreaElement</span> includes <span>InterestInvokerElement</span>;</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLAreaElement</code>.</dd>
</dl>
Expand Down Expand Up @@ -53518,6 +53522,7 @@ You cannot submit this form when the field is incorrect.</samp></pre>
<dd><code data-x="attr-fe-name">name</code></dd>
<dd><code data-x="attr-popovertarget">popovertarget</code></dd>
<dd><code data-x="attr-popovertargetaction">popovertargetaction</code></dd>
<dd><code data-x="attr-interesttarget">interesttarget</code></dd>
<dd><code data-x="attr-button-type">type</code></dd>
<dd><code data-x="attr-button-value">value</code></dd>
<dt><span
Expand Down Expand Up @@ -53552,7 +53557,8 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {

readonly attribute <span>NodeList</span> <span data-x="dom-lfe-labels">labels</span>;
};
<span>HTMLButtonElement</span> includes <span>PopoverInvokerElement</span>;</code></pre>
<span>HTMLButtonElement</span> includes <span>PopoverInvokerElement</span>;
<span>HTMLButtonElement</span> includes <span>InterestInvokerElement</span>;</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLButtonElement</code>.</dd>
</dl>
Expand Down Expand Up @@ -75852,6 +75858,21 @@ contradict people?
data-x="concept-selector-active">being activated</i>.)</p>
</dd>

<dt><dfn selector noexport><code data-x="selector-has-interest">:has-interest</code></dfn></dt>
<dd>
<p>The <code data-x="selector-has-interest">:has-interest</code> <span>pseudo-class</span> is
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think perhaps this definition belongs entirely in CSS. Perhaps all we need in HTML is the concept of "having interest" and "having partial interest" which is the connection over to CSS?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exporting "interest state" ought to be enough for :has-interest and :has-partial-interest, but what about the target-of variants? Just export that too I guess?

defined to match any <span data-x="html elements">HTML element</span> whose <span>interest
state</span> is <span data-x="interest-state-full">full</span>.</p>
</dd>

<dt><dfn selector noexport><code data-x="selector-has-partial-interest">:has-partial-interest</code></dfn></dt>
<dd>
<p>The <code data-x="selector-has-partial-interest">:has-partial-interest</code>
<span>pseudo-class</span> is defined to match any <span data-x="html elements">HTML
element</span> whose <span>interest state</span> is
<span data-x="interest-state-partial">partial</span>.</p>
</dd>

<dt><dfn selector noexport><code data-x="selector-hover">:hover</code></dfn></dt>
<dd>
<p>The <code data-x="selector-hover">:hover</code> <span>pseudo-class</span> is defined to
Expand Down Expand Up @@ -75929,6 +75950,26 @@ Demos:
containing no elements, if it is. <ref>SELECTORS</ref></p>
</dd>

<dt><dfn selector noexport><code data-x="selector-target-of-interest">:target-of-interest</code></dfn></dt>
<dd>
<p>The <code data-x="selector-target-of-interest">:target-of-interest</code>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here too, I think we need to keep track of an interest invoker's currently-active target in HTML, and then CSS can handle connecting that to the pseudo classes?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The way this is written here clearly isn't how you can implement it. I assume the Chromium implementation keeps tracks of the extra state to implement the pseudo-class efficiently?

<span>pseudo-class</span> is defined to match any element that is the result of running
<span data-x="get the attr-associated element">get the
<code data-x="">interesttarget</code>-associated element</span> for any
<span data-x="html elements">HTML element</span> whose <span>interest state</span> is
<span data-x="interest-state-full">full</span>.</p>
</dd>

<dt><dfn selector noexport><code data-x="selector-target-of-partial-interest">:target-of-partial-interest</code></dfn></dt>
<dd>
<p>The <code data-x="selector-target-of-partial-interest">:target-of-partial-interest</code>
<span>pseudo-class</span> is defined to match any element that is the result of running
<span data-x="get the attr-associated element">get the
<code data-x="">interesttarget</code>-associated element</span> for any
<span data-x="html elements">HTML element</span> whose <span>interest state</span> is
<span data-x="interest-state-partial">partial</span>.</p>
</dd>

<dt><dfn selector noexport><code data-x="selector-popover-open">:popover-open</code></dfn></dt>
<dd>
<p>The <code data-x="selector-popover-open">:popover-open</code> <span>pseudo-class</span> is
Expand Down Expand Up @@ -88115,6 +88156,166 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
</ol>


<h3 split-filename="interesttarget">Interest invokers</h3>

<h4>The <code data-x="attr-interesttarget">interesttarget</code> attribute</h4>

<p>The <dfn element-attr for="html-global"><code data-x="attr-interesttarget">interesttarget</code></dfn>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note this issue: there's a likely conclusion that we rename the attribute to interestfor.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, I'll make it interestfor if everyone is happy with that. Would you keep the "target" in :target-of-interest?

attribute on <code>a</code>, <code>area</code>, and <code>button</code> elements allows authors to
set up an invoker relationship between the triggering element and a separate target element such
as a popover. With this arrangement, when the user shows interest in the triggering element (e.g.,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My guess is that it'll pay off to define a concept for "showing interest" that you can refer to, e.g. in this sentence. That will eliminate "e.g. by hovering or focusing" wherever that appears. And another for "losing interest".

The definition of "showing interest" is loosely hovering the element with the mouse for longer than the delay, or focusing the element with the keyboard for longer than the delay, or long-pressing the element on a touchscreen. Whether it makes sense to define these in words, or just rely on the algorithms that practically say those same things, I leave to you. My preference would be to leave it to the algorithms.

Current Chromium code defines this cleanly in one spot, but as of the time of this comment, the code search cache hasn't updated to see it yet. But you can see the algorithms that essentially define interest for at least mouse and keyboard here.

by hovering or focusing it), the target element will have an
<code data-x="event-interest">interest</code> event fired on it. If the target is a popover, this
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"If the target is a popover with a popover visibility state of hidden, ..."

will show the popover.</p>

<p>If specified, the <code data-x="attr-interesttarget">interesttarget</code> attribute value
must be the <span data-x="concept-ID">ID</span> of an element in the same <span>tree</span> as the
element with the <code data-x="attr-interesttarget">interesttarget</code> attribute.</p>

<span data-x="concept-element-dom">DOM interface</span>:
<pre><code class="idl">interface mixin <dfn interface>InterestInvokerElement</dfn> {
[<span>CEReactions</span>] attribute Element? <span data-x="dom-interestTargetElement">interestTargetElement</span>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Likely interestForElement now.

};</code></pre>

<p>The <dfn attribute for="HTMLElement"><code
data-x="dom-interestTargetElement">interestTargetElement</code></dfn> IDL attribute must
<span>reflect</span> the <code data-x="attr-interesttarget">interesttarget</code> attribute.</p>

<div class="example">
<p>The following demonstrates how one might show a tooltip for a button using the
<code data-x="attr-interesttarget">interesttarget</code> attribute to associate the button with
a <code data-x="attr-popover">popover</code> representing the tooltip.</p>

<pre><code class="html">&lt;button interesttarget=tooltip>
Click me
&lt;/button>

&lt;div popover=hint id=tooltip>
I will appear when the user shows interest in the button
&lt;/div></code></pre>
</div>

<p>Every <span data-x="HTML elements">HTML element</span> has an <dfn>interest state</dfn>, initially
<span data-x="interest-state-none">none</span>, with these potential values:</p>

<ul>
<li><p><dfn export for="interest state" data-x="interest-state-none">none</dfn></p></li>

<li><p><dfn export for="interest state" data-x="interest-state-partial">partial</dfn></p></li>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mfreed7 Chromium additionally has a "potential partial interest" state used for popovers:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/dom/element.cc;l=11060-11067;drc=743a82d08e59d803c94ee1b8564b8b11dd7b462f

Do we have to do the same in the spec? Or can we check if the target element is a popover when the scheduled task runs? The popover attribute could be removed before the task runs, so checking it ahead of time seems like it adds the need to double-check it later.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, you'll need this. It's used e.g. to add CSS for the "hint" text about the hotkey, and to check the conditions for moving from partial interest to full interest.

This happens when a user focuses an element that targets a popover which contains interactive content. In that situation, the popover is shown in "partial interest" mode, which renders the interactive content non-keyboard-focusable, so that they don't hijack the sequential focus navigation order. Then, hitting a keyboard hotkey, or doing other things like hovering the popover with the mouse, will upgrade it to "full interest".

Since all of the above doesn't happen if the target isn't a popover, you have to check twice.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. Do we also need :has-potential-partial-interest?


<li><p><dfn export for="interest state" data-x="interest-state-full">full</dfn></p></li>
</ul>


<h4>The <code>InterestEvent</code> interface</h4>

<pre><code class="idl">[Exposed=Window]
interface <dfn interface>InterestEvent</dfn> : <span>Event</span> {
constructor(DOMString type, <span>InterestEventInit</span> eventInitDict);
readonly attribute Element source;
};

dictionary <dfn dictionary>InterestEventInit</dfn> : <span>EventInit</span> {
required Element source;
};</code></pre>

<dl class="domintro">
<dt><code data-x=""><var>event</var>.<span subdfn
data-x="dom-InterestEvent-source">source</span></code></dt>

<dd>
<p>Set to an interesting element TODO.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Set to the element that triggered interest, usually the element with the interesttarget attribute"

or similar?

</dd>
</dl>

<p>The <dfn attribute for="InterestEvent"><code
data-x="dom-InterestEvent-source">source</code></dfn> attribute must return the value it was
initialized to.</p>

<h4 id="interest-target-processing-model">Processing model</h4>

<p>To <dfn export data-x="capture-interest">capture interest</dfn>, given an <span
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than "capture interest", perhaps "gain interest"? And I don't know if this is allowed, but you could say "To capture interest in an HTML element invoker:"

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, side note, I've evolved the Chromium code to a state that I think feels fairly readable, and should hopefully line up 1:1 with spec algorithms. E.g. see GainOrLoseInterest() here:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/dom/element.cc;l=10873;drc=8e9c2dff53856916bbbc066f04b7ab0495d57a2f

that calls InterestGained() (which should line up with this algorithm at 88237) and InterestLost(), and also has some additional stuff you'll need.

data-x="HTML elements">HTML element</span> <var>invoker</var>:</p>

<ol>
<li><p>Assert: <var>invoker</var> is an <code>a</code>, <code>area</code>, or <code>button</code>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might find it easier to make these ifs rather than Asserts. I.e. just early-return if you find illegal things.

Also, you'll probably want to check all of these things.

element.</p></li>

<li><p>Assert: <var>invoker</var> has the <code data-x="attr-interesttarget">interesttarget</code>
attribute specified.</p></li>

<li><p>Let <var>target</var> be the result of running <var>node</var>'s <span data-x="get
the attr-associated element">get the <code data-x="">interesttarget</code>-associated
element</span>.</p></li>

<li><p>If <var>target</var> is null, then return.</p></li>

<li><p>Let <var>continue</var> be the result of <span data-x="concept-event-fire">firing an
event</span> named <code data-x="event-interest">interest</code> at <var>target</var>, using
<code>InterestEvent</code>, with the <code data-x="dom-Event-cancelable">cancelable</code>
attribute initialized to true, and the <code data-x="dom-InterestEvent-source">source</code>
attribute initialized to <var>invoker</var>.</p></li>

<li><p>If <var>continue</var> is false, then return.</p></li>

<li><p>Set <var>invoker</var>'s <span>interest state</span> to
<span data-x="interest-state-full">full</span>.</p></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll also need to add another bit of state to the target (I call it the "InterestInvoker") that points back to the invoker.


<!-- TODO: test that :has-interest doesn't match when the interest event is fired, but does
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure who this TODO is for - are you asking for a WPT for something? Or a spec Assert of some kind?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a TODO to ensure that the timing of when :has-interest begins to match vs. when the "interest" event fires is tested in WPT. Maybe there are already tests for this?

match when the popover toggle event fired. -->

<li><p>If <var>target</var>'s <code data-x="attr-popover">popover</code> attribute is not in the
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned above, I think you also want to check popover's popover visibility state.

<span data-x="attr-popover-none-state">no popover state</span>, then run <span>show popover</span>
given <var>target</var>, false, and <var>invoker</var>.</p></li>
</ol>

<p>To <dfn export data-x="lose-interest">lose interest</dfn>, given an <span
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same nit/question as above: can we say "to 'lose interest' in an HTML element..." rather than "to lose interest, given..."?

data-x="HTML elements">HTML element</span> <var>invoker</var>:</p>

<ol>
<li><p>Assert: <var>invoker</var> is an <code>a</code>, <code>area</code>, or <code>button</code>
element.</p></li>

<li><p>Note: <var>invoker</var> may no longer have the <code
data-x="attr-interesttarget">interesttarget</code> attribute specified.</p></li>

<li><p>Let <var>target</var> be the result of running <var>node</var>'s <span data-x="get
the attr-associated element">get the <code data-x="">interesttarget</code>-associated
element</span>.</p></li>

<li><p>If <var>target</var> is null, then return.</p></li>

<!-- TODO: what state is possibly left dangling if the target wasn't found? -->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hopefully none, but to be verified.


<li><p>Let <var>continue</var> be the result of <span data-x="concept-event-fire">firing an
event</span> named <code data-x="event-interest">loseinterest</code> at <var>target</var>, using
<code>InterestEvent</code>, with the <code data-x="dom-Event-cancelable">cancelable</code> and
<code data-x="dom-Event-composed">composed</code> attributes initialized to true, and the
<code data-x="dom-InterestEvent-source">source</code> attribute initialized to
<var>invoker</var>.</p></li>

<li><p>If <var>continue</var> is false, then return.</p></li>

<li><p>Set <var>invoker</var>'s <span>interest state</span> to
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the code here, but you also should check that the target's InterestInvoker is still pointing back to this.

<span data-x="interest-state-none">none</span>.</p></li>

<li><p>If <var>target</var>'s <code data-x="attr-popover">popover</code> attribute is not in the
<span data-x="attr-popover-none-state">no popover state</span>, then <span
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...and its popover visibility state is showing

data-x="hide popover algorithm">hide popover</span> given <var>invoker</var>, false, true, and
false.</p></li>
</ol>

<p>TODO / questions:</p>

<ul>
<li><p>Actually invoke the capture/lose algorithms.</p></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. Should be akin to ScheduleInterestGainedTask() and ScheduleInterestLostTask().

<li><p>Which algorithm reads the computed style for interest-target-delay?</p></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The two listed just above - when you schedule those tasks, you use the delays.

<li><p>Handle removal of the interesttarget attribute, or the element that has it.</p></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code is right here.

<li><p>Handle changes of the interesttarget attribute while an element has interest.</p></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ditto the link above.

<li><p>Handle changes to the ID attribute referenced by an interesttarget attribute.</p></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shouldn't be needed, since we only do spot checks of the current InterestTargetElement, and those properly get the right id. Nothing happens if the linkage changes in the meantime.

</ul>


<h2 split-filename="browsers" id="browsers">Loading web pages</h2>

<div w-nodev>
Expand Down Expand Up @@ -144434,6 +144635,13 @@ interface <dfn interface>External</dfn> {
<code data-x="attr-script-integrity">script</code>
<td> Integrity metadata used in <cite>Subresource Integrity</cite> checks <ref>SRI</ref>
<td> <a href="#attribute-text">Text</a>
<tr>
<th> <code data-x="">interesttarget</code>
<td> <code data-x="attr-interesttarget">a</code>;
<code data-x="attr-interesttarget">area</code>;
<code data-x="attr-interesttarget">button</code>
<td> Targets an interesting TODO
<td> <span data-x="concept-id">ID</span>* <!-- TODO: is the asterisk needed, is it really complicated? -->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand this question about the asterisk. If you help me understand, I can try to answer the question.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that some things in https://html.spec.whatwg.org/multipage/indices.html#attributes-3 have an asterisk, and below the table it says:

An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.

I'm not sure why it's ID* everywhere instead of ID, I think I'll have to ask another HTML spec editor. Or just leave the asterisk in.

<tr>
<th> <code data-x="">is</code>
<td> <span data-x="attr-is">HTML elements</span>
Expand Down Expand Up @@ -146236,6 +146444,12 @@ INSERT INTERFACES HERE
<td> Elements
<td> Fired when the user changes the <code data-x="attr-contenteditable">contenteditable</code> element's content, or the form control's value. See also the <code data-x="event-change">change</code> event for form controls.

<tr> <!-- interest -->
<td> <dfn event for="HTMLElement"><code data-x="event-interest">interest</code></dfn>
<td> <code>InterestEvent</code>
<td> Elements
<td> Fired on interesting elements because of code <code data-x="attr-interesttarget">interesttarget</code> TODO.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Fired on the target of an interest invoker when the user shows interest in the invoker."


<tr> <!-- invalid -->
<td> <dfn event for="HTMLElement"><code data-x="event-invalid">invalid</code></dfn>
<td> <code>Event</code>
Expand All @@ -146254,6 +146468,12 @@ INSERT INTERFACES HERE
<td> <code>Window</code>, elements
<td> Fired at the <code>Window</code> when the document has finished loading; fired at an element containing a resource (e.g. <code>img</code>, <code>embed</code>) when its resource has finished loading

<tr> <!-- loseinterest -->
<td> <dfn event for="HTMLElement"><code data-x="event-loseinterest">loseinterest</code></dfn>
<td> <code>InterestEvent</code>
<td> Elements
<td> Fired on boring elements because of code <code data-x="attr-interesttarget">interesttarget</code> TODO.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha while I like "boring elements", likely more like

"Fired on the target of an interest invoker when the user loses interest in the invoker."

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha, I forgot I wrote this. Will reluctantly edit it out :D


<tr> <!-- message -->
<td> <dfn event for="Window,EventSource,MessagePort,BroadcastChannel,DedicatedWorkerGlobalScope,Worker,ServiceWorkerContainer"><code data-x="event-message">message</code></dfn>
<td> <code>MessageEvent</code>
Expand Down