[Feat]: Overlay, manage "clicks" that do not effect the stack.

[Westbrook]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Overlay

Description of the requested feature

In some cases there may be reason to allow for clicks on the page not to effect the overlay stack, for instance when placing synthetic <input type="file" /> elements out of bound of overlays where upload interactions are starting due to those overlays being owned by other elements/teams. An escape hatch should be surfaced that would allow those clicks to be ignored without having to do something like: https://webcomponents.dev/edit/aEh5DWhJDDXuCnyOlD4Z/src/index.ts

Example: A synthetic click is handled the same way as a "real" click, and would close the overlay even if that's what you didn't mean to do.

Mockups or screenshots

No response

Implementation notes or ideas

Simplest, though maybe weakest stability, approach to this would be to document a class or attribute that removed a target element from the processing done in the overlay stack.

Overlay could surface a ignoreElement() API where we registered elements.

Overlay could surface a root API such that events outside of the root weren't listened to.

Thoughts?

[Westbrook]

cc: @joekukish and @dsadhanala

[Westbrook]

Needs investigation inside a <dialog> or [popup] context.

• How does the browser handle this?
• Does that delivery reduce the likelihood of this consumption pattern arising?
• look more closely at the well known selector approach.