Re: [WICG/webcomponents] Reference Target: How to handle events fired on the reference target by related elements? (Issue #1098)

Westbrook left a comment (WICG/webcomponents#1098)

Off the top of my head, I would not be surprised to see this pattern:
```
<button popovertarget="popover">Toggle</button>
<x-popover id="popover">
  <template shadowRootMode="open" referenceTarget="container">
    <style>
      #container {
        /* completely encapsulated styles for the popover */
      }
    </style>
    <div id="container" popover>
     Popover content.
    </div>
  </template>
</x-popover>
```
I'm not sure if I'd call it contrived or convention.

This style of usage is built directly into patterns like https://opensource.adobe.com/spectrum-web-components/components/overlay/ via JS mapping due to how it benefitted polyfilling browsers that did not support Popover, and likely will persist to polyfilling browsers that do not have Anchor Position just the same.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1098#issuecomment-2798301915
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1098/2798301915@github.com>

Received on Saturday, 12 April 2025 00:48:25 UTC