@@ -21762,6 +21762,7 @@ interface <dfn interface>HTMLDivElement</dfn> : <span>HTMLElement</span> {
21762
21762
<dd><code data-x="attr-hyperlink-hreflang">hreflang</code></dd>
21763
21763
<dd><code data-x="attr-hyperlink-type">type</code></dd>
21764
21764
<dd><code data-x="attr-hyperlink-referrerpolicy">referrerpolicy</code></dd>
21765
+ <dd><code data-x="attr-interesttarget">interesttarget</code></dd>
21765
21766
<dt><span
21766
21767
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
21767
21768
<dd>If the element has an <code data-x="attr-hyperlink-href">href</code> attribute: <a
@@ -21790,7 +21791,8 @@ interface <dfn interface>HTMLAnchorElement</dfn> : <span>HTMLElement</span> {
21790
21791
21791
21792
// <a href="#HTMLAnchorElement-partial">also has obsolete members</a>
21792
21793
};
21793
- <span>HTMLAnchorElement</span> includes <span>HTMLHyperlinkElementUtils</span>;</code></pre>
21794
+ <span>HTMLAnchorElement</span> includes <span>HTMLHyperlinkElementUtils</span>;
21795
+ <span>HTMLAnchorElement</span> includes <span>InterestInvokerElement</span>;</code></pre>
21794
21796
</dd>
21795
21797
<dd w-dev>Uses <code>HTMLAnchorElement</code>.</dd>
21796
21798
</dl>
@@ -41997,6 +41999,7 @@ interface <dfn interface>HTMLMapElement</dfn> : <span>HTMLElement</span> {
41997
41999
<dd><code data-x="attr-hyperlink-ping">ping</code></dd>
41998
42000
<dd><code data-x="attr-hyperlink-rel">rel</code></dd>
41999
42001
<dd><code data-x="attr-hyperlink-referrerpolicy">referrerpolicy</code></dd>
42002
+ <dd><code data-x="attr-interesttarget">interesttarget</code></dd>
42000
42003
<dt><span
42001
42004
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
42002
42005
<dd>If the element has an <code data-x="attr-hyperlink-href">href</code> attribute: <a
@@ -42023,7 +42026,8 @@ interface <dfn interface>HTMLAreaElement</dfn> : <span>HTMLElement</span> {
42023
42026
42024
42027
// <a href="#HTMLAreaElement-partial">also has obsolete members</a>
42025
42028
};
42026
- <span>HTMLAreaElement</span> includes <span>HTMLHyperlinkElementUtils</span>;</code></pre>
42029
+ <span>HTMLAreaElement</span> includes <span>HTMLHyperlinkElementUtils</span>;
42030
+ <span>HTMLAreaElement</span> includes <span>InterestInvokerElement</span>;</code></pre>
42027
42031
</dd>
42028
42032
<dd w-dev>Uses <code>HTMLAreaElement</code>.</dd>
42029
42033
</dl>
@@ -53429,6 +53433,7 @@ You cannot submit this form when the field is incorrect.</samp></pre>
53429
53433
<dd><code data-x="attr-fe-name">name</code></dd>
53430
53434
<dd><code data-x="attr-popovertarget">popovertarget</code></dd>
53431
53435
<dd><code data-x="attr-popovertargetaction">popovertargetaction</code></dd>
53436
+ <dd><code data-x="attr-interesttarget">interesttarget</code></dd>
53432
53437
<dd><code data-x="attr-button-type">type</code></dd>
53433
53438
<dd><code data-x="attr-button-value">value</code></dd>
53434
53439
<dt><span
@@ -53461,7 +53466,8 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
53461
53466
53462
53467
readonly attribute <span>NodeList</span> <span data-x="dom-lfe-labels">labels</span>;
53463
53468
};
53464
- <span>HTMLButtonElement</span> includes <span>PopoverInvokerElement</span>;</code></pre>
53469
+ <span>HTMLButtonElement</span> includes <span>PopoverInvokerElement</span>;
53470
+ <span>HTMLButtonElement</span> includes <span>InterestInvokerElement</span>;</code></pre>
53465
53471
</dd>
53466
53472
<dd w-dev>Uses <code>HTMLButtonElement</code>.</dd>
53467
53473
</dl>
@@ -74941,6 +74947,13 @@ contradict people?
74941
74947
data-x="concept-selector-active">being activated</i>.)</p>
74942
74948
</dd>
74943
74949
74950
+ <dt><dfn selector noexport><code data-x="selector-has-interest">:has-interest</code></dfn></dt>
74951
+ <dd>
74952
+ <p>The <code data-x="selector-has-interest">:has-interest</code> <span>pseudo-class</span> is
74953
+ defined to match any <span data-x="html elements">HTML element</span> whose <span>has
74954
+ interest</span> is true.</p>
74955
+ </dd>
74956
+
74944
74957
<dt><dfn selector noexport><code data-x="selector-hover">:hover</code></dfn></dt>
74945
74958
<dd>
74946
74959
<p>The <code data-x="selector-hover">:hover</code> <span>pseudo-class</span> is defined to
@@ -87118,6 +87131,163 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
87118
87131
</ol>
87119
87132
87120
87133
87134
+ <h3 split-filename="interesttarget">Interest invokers</h3>
87135
+
87136
+ <h4>The <code data-x="attr-interesttarget">interesttarget</code> attribute</h4>
87137
+
87138
+ <p>The <dfn element-attr for="html-global"><code data-x="attr-interesttarget">interesttarget</code></dfn> attribute on <code>a</code>, <code>area</code>, and <code>button</code> elements TODO.</p>
87139
+
87140
+ <p>If specified, the <code data-x="attr-interesttarget">interesttarget</code> attribute value
87141
+ must be the <span data-x="concept-ID">ID</span> of an element in the same <span>tree</span> as the
87142
+ element with the <code data-x="attr-interesttarget">interesttarget</code> attribute.</p>
87143
+
87144
+ <span data-x="concept-element-dom">DOM interface</span>:
87145
+ <pre><code class="idl">interface mixin <dfn interface>InterestInvokerElement</dfn> {
87146
+ [<span>CEReactions</span>] attribute Element? <span data-x="dom-interestTargetElement">interestTargetElement</span>;
87147
+ };</code></pre>
87148
+
87149
+ <p>The <dfn attribute for="HTMLElement"><code
87150
+ data-x="dom-interestTargetElement">interestTargetElement</code></dfn> IDL attribute must
87151
+ <span>reflect</span> the <code data-x="attr-interesttarget">interesttarget</code> attribute.</p>
87152
+
87153
+ <div class="example">
87154
+ <p>The following demonstrates how one might show a tooltip for a button using the
87155
+ <code data-x="attr-interesttarget">interesttarget</code> attribute to associate the button with
87156
+ a <code>div</code> <code data-x="attr-popover">popover</code> representing the tooltip.</p>
87157
+
87158
+ <pre><code class="html"><button interesttarget=tooltip>
87159
+ Click me
87160
+ </button>
87161
+
87162
+ <div popover=hint id=tooltip>
87163
+ I will appear
87164
+ </div></code></pre>
87165
+ </div>
87166
+
87167
+ <p>Every <span data-x="HTML elements">HTML element</span> has a <dfn>has interest</dfn>, which is a
87168
+ boolean, initially set to false.</p>
87169
+ <!-- TODO: or have an Element slot on Document for this since there can only be one at a time? -->
87170
+
87171
+ <h4>The <code>InterestEvent</code> interface</h4>
87172
+
87173
+ <pre><code class="idl">[Exposed=Window]
87174
+ interface <dfn interface>InterestEvent</dfn> : <span>Event</span> {
87175
+ constructor(DOMString type, optional <span>InterestEventInit</span> eventInitDict = {});
87176
+ readonly attribute Element? source; // TODO: nullable, or require in ctor?
87177
+ };
87178
+
87179
+ dictionary <dfn dictionary>InterestEventInit</dfn> : <span>EventInit</span> {
87180
+ Element? source = null;
87181
+ };</code></pre>
87182
+
87183
+ <dl class="domintro">
87184
+ <dt><code data-x=""><var>event</var>.<span subdfn
87185
+ data-x="dom-InterestEvent-source">source</span></code></dt>
87186
+
87187
+ <dd>
87188
+ <p>Set to an interesting element TODO.</p>
87189
+ </dd>
87190
+ </dl>
87191
+
87192
+ <p>The <dfn attribute for="InterestEvent"><code
87193
+ data-x="dom-InterestEvent-source">source</code></dfn> attribute must return the value it was
87194
+ initialized to.</p>
87195
+
87196
+ <h4 id="interest-target-processing-model">Processing model</h4>
87197
+
87198
+ <p>To <dfn export data-x="capture-interest">capture interest</dfn>, given an <span
87199
+ data-x="HTML elements">HTML element</span> <var>invoker</var>:</p>
87200
+
87201
+ <ol>
87202
+ <li><p>Assert: <var>invoker</var> is an <code>a</code>, <code>area</code>, or <code>button</code>
87203
+ element.</p></li>
87204
+
87205
+ <li><p>Assert: <var>invoker</var> has the <code data-x="attr-interesttarget">interesttarget</code>
87206
+ attribute specified.</p></li>
87207
+
87208
+ <li><p>Let <var>target</var> be the result of running <var>node</var>'s <span data-x="get
87209
+ the attr-associated element">get the <code data-x="">interesttarget</code>-associated
87210
+ element</span>.</p></li>
87211
+
87212
+ <li><p>If <var>target</var> is null, then return.</p></li>
87213
+
87214
+ <li><p>Let <var>continue</var> be the result of <span data-x="concept-event-fire">firing an
87215
+ event</span> named <code data-x="event-interest">interest</code> at <var>target</var>, using
87216
+ <code>InterestEvent</code>, with the <code data-x="dom-Event-cancelable">cancelable</code> and
87217
+ <code data-x="dom-Event-composed">composed</code> attributes initialized to true, and the
87218
+ <code data-x="dom-InterestEvent-source">source</code> attribute initialized to
87219
+ <var>invoker</var>.</p></li>
87220
+ <!-- TODO: the explainer calls for composed without bubbling, does that make sense? -->
87221
+
87222
+ <li><p>If <var>continue</var> is false, then return.</p></li>
87223
+
87224
+ <li><p>Set <var>invoker</var>'s <span>has interest</span> to true.</p></li>
87225
+
87226
+ <!-- TODO: test that :has-interest doesn't match when the interest event is fired, but does
87227
+ match when the popover toggle event fired. -->
87228
+
87229
+ <li><p>If <var>target</var>'s <code data-x="attr-popover">popover</code> attribute is not in the
87230
+ <span data-x="attr-popover-none-state">no popover state</span>, then run <span>show popover</span>
87231
+ given <var>target</var>, false, and <var>invoker</var>.</p></li>
87232
+ <!-- TODO: should invoker be passed? It's used for popovertarget, might not do the right thing
87233
+ if passed in here... -->
87234
+
87235
+ <!-- TODO: nothing to do if not a popover? how can devs show/hide it? needs another pseudo-class? -->
87236
+ </ol>
87237
+
87238
+ <p>To <dfn export data-x="lose-interest">lose interest</dfn>, given an <span
87239
+ data-x="HTML elements">HTML element</span> <var>invoker</var>:</p>
87240
+
87241
+ <ol>
87242
+ <li><p>Assert: <var>invoker</var> is an <code>a</code>, <code>area</code>, or <code>button</code>
87243
+ element.</p></li>
87244
+
87245
+ <li><p>Note: <var>invoker</var> may no longer have the <code
87246
+ data-x="attr-interesttarget">interesttarget</code> attribute specified.</p></li>
87247
+
87248
+ <li><p>Let <var>target</var> be the result of running <var>node</var>'s <span data-x="get
87249
+ the attr-associated element">get the <code data-x="">interesttarget</code>-associated
87250
+ element</span>.</p></li>
87251
+
87252
+ <li><p>If <var>target</var> is null, then return.</p></li>
87253
+
87254
+ <!-- TODO: what state is possibly left dangling if the target wasn't found? -->
87255
+
87256
+ <li><p>Let <var>continue</var> be the result of <span data-x="concept-event-fire">firing an
87257
+ event</span> named <code data-x="event-interest">loseinterest</code> at <var>target</var>, using
87258
+ <code>InterestEvent</code>, with the <code data-x="dom-Event-cancelable">cancelable</code> and
87259
+ <code data-x="dom-Event-composed">composed</code> attributes initialized to true, and the
87260
+ <code data-x="dom-InterestEvent-source">source</code> attribute initialized to
87261
+ <var>invoker</var>.</p></li>
87262
+ <!-- TODO: the explainer calls for composed without bubbling, does that make sense? -->
87263
+
87264
+ <li><p>If <var>continue</var> is false, then return.</p></li>
87265
+ <!-- TODO: what's the point of being able to cancel this event? -->
87266
+
87267
+ <li><p>If <var>target</var>'s <code data-x="attr-popover">popover</code> attribute is not in the
87268
+ <span data-x="attr-popover-none-state">no popover state</span>, then <span
87269
+ data-x="hide popover algorithm">hide popover</span> given <var>invoker</var>, false, true, and
87270
+ false.</p></li>
87271
+
87272
+ <li><p>Set <var>invoker</var>'s <span>has interest</span> to false.</p></li>
87273
+ <!-- TODO: is this the right time to change the state? too late? -->
87274
+ </ol>
87275
+
87276
+ <p>TODO / questions:</p>
87277
+
87278
+ <ul>
87279
+ <li><p>Internal slot on elements to store interest state, or lean on state elsewhere?</p></li>
87280
+ <li><p>Actually invoke the capture/lose algorithms.</p></li>
87281
+ <li><p>Fire non-bubbling, composed, cancelable events. Canceling the event makes sense on showing,
87282
+ but does it really on hiding?</p></li>
87283
+ <li><p>States for interest being shown, and call sites that change that state.</p></li>
87284
+ <li><p>Which algorithm reads the computed style for interest-target-delay?</p></li>
87285
+ <li><p>Handle removal of the interesttarget attribute, or the element that has it.</p></li>
87286
+ <li><p>Handle changes of the interesttarget attribute while an element has interest.</p></li>
87287
+ <li><p>Handle changes to the ID attribute referenced by an interesttarget attribute.</p></li>
87288
+ </ul>
87289
+
87290
+
87121
87291
<h2 split-filename="browsers" id="browsers">Loading web pages</h2>
87122
87292
87123
87293
<div w-nodev>
@@ -143277,6 +143447,13 @@ interface <dfn interface>External</dfn> {
143277
143447
<code data-x="attr-script-integrity">script</code>
143278
143448
<td> Integrity metadata used in <cite>Subresource Integrity</cite> checks <ref>SRI</ref>
143279
143449
<td> <a href="#attribute-text">Text</a>
143450
+ <tr>
143451
+ <th> <code data-x="">interesttarget</code>
143452
+ <td> <code data-x="attr-interesttarget">a</code>;
143453
+ <code data-x="attr-interesttarget">area</code>;
143454
+ <code data-x="attr-interesttarget">button</code>
143455
+ <td> Targets an interesting TODO
143456
+ <td> <span data-x="concept-id">ID</span>* <!-- TODO: is the asterisk needed, is it really complicated? -->
143280
143457
<tr>
143281
143458
<th> <code data-x="">is</code>
143282
143459
<td> <span data-x="attr-is">HTML elements</span>
@@ -145061,6 +145238,12 @@ INSERT INTERFACES HERE
145061
145238
<td> Elements
145062
145239
<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.
145063
145240
145241
+ <tr> <!-- interest -->
145242
+ <td> <dfn event for="HTMLElement"><code data-x="event-interest">interest</code></dfn>
145243
+ <td> <code>InterestEvent</code>
145244
+ <td> Elements
145245
+ <td> Fired on interesting elements because of code <code data-x="attr-interesttarget">interesttarget</code> TODO.
145246
+
145064
145247
<tr> <!-- invalid -->
145065
145248
<td> <dfn event for="HTMLElement"><code data-x="event-invalid">invalid</code></dfn>
145066
145249
<td> <code>Event</code>
@@ -145079,6 +145262,12 @@ INSERT INTERFACES HERE
145079
145262
<td> <code>Window</code>, elements
145080
145263
<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
145081
145264
145265
+ <tr> <!-- loseinterest -->
145266
+ <td> <dfn event for="HTMLElement"><code data-x="event-loseinterest">loseinterest</code></dfn>
145267
+ <td> <code>InterestEvent</code>
145268
+ <td> Elements
145269
+ <td> Fired on boring elements because of code <code data-x="attr-interesttarget">interesttarget</code> TODO.
145270
+
145082
145271
<tr> <!-- message -->
145083
145272
<td> <dfn event for="Window,EventSource,MessagePort,BroadcastChannel,DedicatedWorkerGlobalScope,Worker,ServiceWorkerContainer"><code data-x="event-message">message</code></dfn>
145084
145273
<td> <code>MessageEvent</code>
0 commit comments