diff --git a/source b/source index 1c0e98a5967..db6cb7729ca 100644 --- a/source +++ b/source @@ -21795,6 +21795,7 @@ interface HTMLDivElement : HTMLElement {
hreflang
type
referrerpolicy
+
interesttarget
Accessibility considerations:
If the element has an href attribute: HTMLAnchorElement : HTMLElement { // also has obsolete members }; -HTMLAnchorElement includes HTMLHyperlinkElementUtils; +HTMLAnchorElement includes HTMLHyperlinkElementUtils; +HTMLAnchorElement includes InterestInvokerElement;
Uses HTMLAnchorElement.
@@ -42070,6 +42072,7 @@ interface HTMLMapElement : HTMLElement {
ping
rel
referrerpolicy
+
interesttarget
Accessibility considerations:
If the element has an href attribute: HTMLAreaElement : HTMLElement { // also has obsolete members }; -HTMLAreaElement includes HTMLHyperlinkElementUtils; +HTMLAreaElement includes HTMLHyperlinkElementUtils; +HTMLAreaElement includes InterestInvokerElement;
Uses HTMLAreaElement.
@@ -53518,6 +53522,7 @@ You cannot submit this form when the field is incorrect.
name
popovertarget
popovertargetaction
+
interesttarget
type
value
HTMLButtonElement : HTMLElement { readonly attribute NodeList labels; }; -HTMLButtonElement includes PopoverInvokerElement; +HTMLButtonElement includes PopoverInvokerElement; +HTMLButtonElement includes InterestInvokerElement;
Uses HTMLButtonElement.
@@ -75852,6 +75858,21 @@ contradict people? data-x="concept-selector-active">being activated.)

+
:has-interest
+
+

The :has-interest pseudo-class is + defined to match any HTML element whose interest + state is full.

+
+ +
:has-partial-interest
+
+

The :has-partial-interest + pseudo-class is defined to match any HTML + element whose interest state is + partial.

+
+
:hover

The :hover pseudo-class is defined to @@ -75929,6 +75950,26 @@ Demos: containing no elements, if it is. SELECTORS

+
:target-of-interest
+
+

The :target-of-interest + pseudo-class is defined to match any element that is the result of running + get the + interesttarget-associated element for any + HTML element whose interest state is + full.

+
+ +
:target-of-partial-interest
+
+

The :target-of-partial-interest + pseudo-class is defined to match any element that is the result of running + get the + interesttarget-associated element for any + HTML element whose interest state is + partial.

+
+
:popover-open

The :popover-open pseudo-class is @@ -88115,6 +88156,166 @@ dictionary DragEventInit : MouseEventInit { +

Interest invokers

+ +

The interesttarget attribute

+ +

The interesttarget + attribute on a, area, and button 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., + by hovering or focusing it), the target element will have an + interest event fired on it. If the target is a popover, this + will show the popover.

+ +

If specified, the interesttarget attribute value + must be the ID of an element in the same tree as the + element with the interesttarget attribute.

+ + DOM interface: + 
interface mixin InterestInvokerElement {
+  [CEReactions] attribute Element? interestTargetElement;
+};
+ +

The interestTargetElement IDL attribute must + reflect the interesttarget attribute.

+ +
+

The following demonstrates how one might show a tooltip for a button using the + interesttarget attribute to associate the button with + a popover representing the tooltip.

+ + 
<button interesttarget=tooltip>
+ Click me
+</button>
+
+<div popover=hint id=tooltip>
+ I will appear when the user shows interest in the button
+</div>
+
+ +

Every HTML element has an interest state, initially + none, with these potential values:

+ + + + +

The InterestEvent interface

+ + 
[Exposed=Window]
+interface InterestEvent : Event {
+  constructor(DOMString type, InterestEventInit eventInitDict);
+  readonly attribute Element source;
+};
+
+dictionary InterestEventInit : EventInit {
+  required Element source;
+};
+ +
+
event.source
+ +
+

Set to an interesting element TODO.

+
+
+ +

The source attribute must return the value it was + initialized to.

+ +

Processing model

+ +

To capture interest, given an HTML element invoker:

+ +
    +

  1. Assert: invoker is an a, area, or button + element.

    2. + +

  2. Assert: invoker has the interesttarget + attribute specified.

    3. + +

  3. Let target be the result of running node's get the interesttarget-associated + element.

    4. + +

  4. If target is null, then return.

    5. + +

  5. Let continue be the result of firing an + event named interest at target, using + InterestEvent, with the cancelable + attribute initialized to true, and the source + attribute initialized to invoker.

    6. + +

  6. If continue is false, then return.

    7. + +

  7. Set invoker's interest state to + full.

    8. + + + +

  8. If target's popover attribute is not in the + no popover state, then run show popover + given target, false, and invoker.

    9. +
+ +

To lose interest, given an HTML element invoker:

+ +
    +

  1. Assert: invoker is an a, area, or button + element.

    2. + +

  2. Note: invoker may no longer have the interesttarget attribute specified.

    3. + +

  3. Let target be the result of running node's get the interesttarget-associated + element.

    4. + +

  4. If target is null, then return.

    5. + + + +

  5. Let continue be the result of firing an + event named loseinterest at target, using + InterestEvent, with the cancelable and + composed attributes initialized to true, and the + source attribute initialized to + invoker.

    6. + +

  6. If continue is false, then return.

    7. + +

  7. Set invoker's interest state to + none.

    8. + +

  8. If target's popover attribute is not in the + no popover state, then hide popover given invoker, false, true, and + false.

    9. +
+ +

TODO / questions:

+ + + +

Loading web pages

@@ -144434,6 +144635,13 @@ interface External { script Integrity metadata used in Subresource Integrity checks SRI Text + + interesttarget + a; + area; + button + Targets an interesting TODO + ID* is HTML elements @@ -146236,6 +146444,12 @@ INSERT INTERFACES HERE Elements Fired when the user changes the contenteditable element's content, or the form control's value. See also the change event for form controls. + + interest + InterestEvent + Elements + Fired on interesting elements because of code interesttarget TODO. + invalid Event @@ -146254,6 +146468,12 @@ INSERT INTERFACES HERE Window, elements Fired at the Window when the document has finished loading; fired at an element containing a resource (e.g. img, embed) when its resource has finished loading + + loseinterest + InterestEvent + Elements + Fired on boring elements because of code interesttarget TODO. + message MessageEvent