Skip to content

Commit b2f67b2

Browse files
committed
Add the interesttarget attribute
1 parent 0b5dd5e commit b2f67b2

File tree

1 file changed

+192
-3
lines changed

1 file changed

+192
-3
lines changed

source

Lines changed: 192 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21762,6 +21762,7 @@ interface <dfn interface>HTMLDivElement</dfn> : <span>HTMLElement</span> {
2176221762
<dd><code data-x="attr-hyperlink-hreflang">hreflang</code></dd>
2176321763
<dd><code data-x="attr-hyperlink-type">type</code></dd>
2176421764
<dd><code data-x="attr-hyperlink-referrerpolicy">referrerpolicy</code></dd>
21765+
<dd><code data-x="attr-interesttarget">interesttarget</code></dd>
2176521766
<dt><span
2176621767
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
2176721768
<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> {
2179021791

2179121792
// <a href="#HTMLAnchorElement-partial">also has obsolete members</a>
2179221793
};
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>
2179421796
</dd>
2179521797
<dd w-dev>Uses <code>HTMLAnchorElement</code>.</dd>
2179621798
</dl>
@@ -41997,6 +41999,7 @@ interface <dfn interface>HTMLMapElement</dfn> : <span>HTMLElement</span> {
4199741999
<dd><code data-x="attr-hyperlink-ping">ping</code></dd>
4199842000
<dd><code data-x="attr-hyperlink-rel">rel</code></dd>
4199942001
<dd><code data-x="attr-hyperlink-referrerpolicy">referrerpolicy</code></dd>
42002+
<dd><code data-x="attr-interesttarget">interesttarget</code></dd>
4200042003
<dt><span
4200142004
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
4200242005
<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> {
4202342026

4202442027
// <a href="#HTMLAreaElement-partial">also has obsolete members</a>
4202542028
};
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>
4202742031
</dd>
4202842032
<dd w-dev>Uses <code>HTMLAreaElement</code>.</dd>
4202942033
</dl>
@@ -53429,6 +53433,7 @@ You cannot submit this form when the field is incorrect.</samp></pre>
5342953433
<dd><code data-x="attr-fe-name">name</code></dd>
5343053434
<dd><code data-x="attr-popovertarget">popovertarget</code></dd>
5343153435
<dd><code data-x="attr-popovertargetaction">popovertargetaction</code></dd>
53436+
<dd><code data-x="attr-interesttarget">interesttarget</code></dd>
5343253437
<dd><code data-x="attr-button-type">type</code></dd>
5343353438
<dd><code data-x="attr-button-value">value</code></dd>
5343453439
<dt><span
@@ -53461,7 +53466,8 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
5346153466

5346253467
readonly attribute <span>NodeList</span> <span data-x="dom-lfe-labels">labels</span>;
5346353468
};
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>
5346553471
</dd>
5346653472
<dd w-dev>Uses <code>HTMLButtonElement</code>.</dd>
5346753473
</dl>
@@ -74941,6 +74947,13 @@ contradict people?
7494174947
data-x="concept-selector-active">being activated</i>.)</p>
7494274948
</dd>
7494374949

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+
7494474957
<dt><dfn selector noexport><code data-x="selector-hover">:hover</code></dfn></dt>
7494574958
<dd>
7494674959
<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> {
8711887131
</ol>
8711987132

8712087133

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">&lt;button interesttarget=tooltip>
87159+
Click me
87160+
&lt;/button>
87161+
87162+
&lt;div popover=hint id=tooltip>
87163+
I will appear
87164+
&lt;/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+
8712187291
<h2 split-filename="browsers" id="browsers">Loading web pages</h2>
8712287292

8712387293
<div w-nodev>
@@ -143277,6 +143447,13 @@ interface <dfn interface>External</dfn> {
143277143447
<code data-x="attr-script-integrity">script</code>
143278143448
<td> Integrity metadata used in <cite>Subresource Integrity</cite> checks <ref>SRI</ref>
143279143449
<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? -->
143280143457
<tr>
143281143458
<th> <code data-x="">is</code>
143282143459
<td> <span data-x="attr-is">HTML elements</span>
@@ -145061,6 +145238,12 @@ INSERT INTERFACES HERE
145061145238
<td> Elements
145062145239
<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.
145063145240

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+
145064145247
<tr> <!-- invalid -->
145065145248
<td> <dfn event for="HTMLElement"><code data-x="event-invalid">invalid</code></dfn>
145066145249
<td> <code>Event</code>
@@ -145079,6 +145262,12 @@ INSERT INTERFACES HERE
145079145262
<td> <code>Window</code>, elements
145080145263
<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
145081145264

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+
145082145271
<tr> <!-- message -->
145083145272
<td> <dfn event for="Window,EventSource,MessagePort,BroadcastChannel,DedicatedWorkerGlobalScope,Worker,ServiceWorkerContainer"><code data-x="event-message">message</code></dfn>
145084145273
<td> <code>MessageEvent</code>

0 commit comments

Comments
 (0)