jarek-foksa / xel

Xel - Widget toolkit for building native-like Electron and Web apps
https://xel-toolkit.org
Other
691 stars 59 forks source link

Update the ownerButtons() getter to use closest() #50

Closed depeele closed 6 years ago

depeele commented 6 years ago

Use closest() instead of ad-hoc parent checks to identify any x-buttons container.

This avoids errors when a one or more x-button elements are contained within an x-box at the top-level of a component. In this case, the x-box is at the top of the shadowRoot and technically has no parent element. This would cause the ad-hoc check to fail at this.parentElement.parentElement.localName since this.parentElement.parentElement is null.

jarek-foksa commented 6 years ago

This approach is going to cause issues when working with nested components. For example:

<x-buttons id="buttons-1">
  <x-button id="button-1">
    <x-popover>
      <x-button id="button-2"></x-button>
    </x-popover>
  </x-button>
</x-buttons>

#button-2.ownerButtons should be null, not #buttons-1.

I have committed a fix which checks whether this.parentElement.parentElement exists before performing further checks.