Selectable doesn't work inside a shadow root

[guillemcordoba]

The selectable property in the interaction plugin doesn't work if the calendar is rendered inside a shadow root (e.g. inside of a lit element).

This is because the getElementWithPayload function here assumes that document.elementsFromPoint(x,y) will return the elements of the event calendar, but if they are inside a shadow root what's returned is the custom element that contains the shadow root.

I've been able to fix it by replacing that function's implementation with this implementation:

function getElementWithPayload(x, y, root = document) {
  for (let el of root.elementsFromPoint(x, y)) {
    if (el.shadowRoot) return getElementWithPayload(x, y, el.shadowRoot);
    else if (hasPayload(el)) {
      return el;
    }
  }
  return null;
}

Which recursively pierces through all shadow roots that it finds.

Thanks for this amazing library!

[vkurko]

@guillemcordoba Thank you very much for finding the issue and providing the solution. I will apply it in the next release.

[vkurko]

This is now implemented in v1.4.0. Please check.

[guillemcordoba]

It works! It's a joy working with open-source libraries that have cool maintainers that respond quickly. Props and many thanks!