[popover] the complexity of triggering elements across multiple tree scopes (document or shadow root)

[yinonov]

As of now, the idref of 'popovertoggletarget' | 'popoverhidetarget' | 'popovershowtarget' must be in the same tree scope (document or shadow root) of the popover element. Reason is the chance of conflicting identical element IDs in the various trees.

<button popovertoggletarget="my-popover">toggle popover</button>
<custom-element-1>
  #shadow-root
  <div id="my-popover">

<custom-element-2>
  #shadow-root
  <div id="my-popover">

Could triggering elements extend to work across tree scope boundaries?

that's quite a meaningful caveat considering triggering elements in real world use.

[mfreed7]

It's a good question. Due to the desire for an easy declarative API, IDREFs are indeed used and they are restricted to a single document or shadow root. However, the Javascript (IDL) reflections of these attributes allow arbitrary element references to be used:

<button id=foo>Click me</button>
<div id=host>
  <template shadowroot=open>
    <div popover>My popover</div>
  </template>
</div>

<script>
foo.popoverToggleTargetElement = host.shadowRoot.querySelector('[popover]');
</script>

Does that meet your use case?

[yinonov]

absolutely!

[yinonov]

@mfreed7

haven't found implementation details on handling the properties for the popover invokers. is there any reference authored by open-ui?

oddbird/popover-polyfill#70 (comment)