[Popup] Invoking popups from custom elements with script vs popup attribute

[melanierichards]

In the initial popup proposal, we shared that a popup attribute applied to an element could invoke a related <popup> element. Applicability of the popup attribute is currently restricted to a small number of interactive elements:

button or input in the button state (input type="button"). Invoking one of these elements will show the relevant popup.
input in the text, email, phone, or url states. Setting focus in one of these elements will show the relevant popup. Note: we may need to explore means of suppressing this invocation on focus, for instances where the author instead wishes to show the popup based on text-entry logic.

In the spirit of semantic, accessible markup, it is important to restrict which elements can take the popup attribute. A user may not expect to trigger a popup by "invoking" a <div>, so we'd like to avoid encouraging these sorts of patterns.

In the discussion, someone brought up that a custom element could be a trigger for a popup, and that the current restrictions felt overly restrictive as a result. The question for devs writing these types of custom elements is: does anything block you from calling show() on the popup in script for this custom element, or can script suffice to wire up this interaction?

[github-actions]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[mfreed7]

In addition to the comments in OP, which I generally agree with, I think the most typical pattern for a custom element to trigger a popup would be for that custom element to contain a button that triggers the popup, rather than the entire custom element being activatable:

<my-element>
  <template shadowroot=open>
    <button togglepopup=foo>Click for popup</button>
    <div popup=popup id=foo>I'm a popup</div>
  </template>
</my-element>

In this case, things work as expected. In the case where the popup lives outside the shadow tree (and/or outside the custom element), then we anyway can't use the togglepopup attribute, because idref's can't cross shadow bounds. So in all but the simple cases, the custom element will need to call .showPopup() on the appropriate popup.

I really think that sounds ok. Adding some sort of default behavior for arbitrary custom elements to be activatable, just so they can use togglepopup and avoid JS sounds misguided. The custom element will already be using JS for behavior, and it would seem normal to include popup triggering in that JS. The togglepopup attribute is to make things possible in pure HTML/CSS land, which doesn't include custom elements.

[mfreed7]

Any objections to me closing this issue?

[mfreed7]

Per no objections, I'm going to close this issue. Thanks!