Node.contains () не включает в себя распределенный контент.Какая альтернатива - PullRequest
Новая
       5

Node.contains () не включает в себя распределенный контент.Какая альтернатива

0 голосов
/ 20 декабря 2018

Я делаю диалоговое окно с пользовательским элементом.Он НЕ является модальным, поэтому для его обнаружения необходимо определить щелчок снаружи, но закрывать его не следует (если не установлено свойство closeOnClick).Он использует значение по умолчанию <slot> для содержимого диалогового окна.HTML-код для него выглядит следующим образом (я использую lit-element, но это не имеет отношения к этому вопросу). 

  <style>
    :host {
      display: block;
    }
    dialog {
      position: fixed;
      padding: 10px;
      margin:0;
      border: none;
      border-radius: 2px;
      box-shadow: 0 0 40px rgba(0,0,0,0.1), 0 0 10px rgba(0,0,0,0.25);
    }
  </style>
  <dialog
    id="dialog"
    @close="${this._dialogClosed}"
    @keys-pressed="${this._keysPressed}">
    <slot></slot>
  </dialog>

Я управляю несколькими экземплярами, удерживая карту экземпляров с z-index в качестве значения,Когда есть хотя бы одно открытое диалоговое окно, у меня есть прослушиватель событий на window для события click.Когда я получаю щелчок, я использую следующий код, чтобы увидеть, закрывать ли диалоговое окно (this.sizingTarget - это элемент dialog в пределах shadowRoot моего элемента). 

const keys = [...openDialogs.keys()];
const self = keys[keys.length -1];
if (self.clickReady && (self.closeOnClick || !self.sizingTarget.contains(e.composedPath()[0]))) {
  //click was outside dialog (or we close on click), so close
  self.close('click');
}

Проблема заключается вtest !self.sizingTarget.contains(e.composedPath()[0]) не работает, когда элемент, по которому щелкнули, сам по себе является пользовательским элементом с некоторыми элементами <slot>.Я нашел долгое обсуждение на github по этой проблеме, и, похоже, они решили ее, добавив свойство Node.isConnected.Но я не могу понять, как вы должны его использовать.

Может кто-нибудь объяснить, как я должен узнать, действительно ли выбранный элемент находится в окончательно распределенных узлах в моем дереве элементов и их (все открыто) shadowRoots.

1 Ответ

0 голосов
/ 20 декабря 2018

Похоже, что !e.composedPath().includes(self.sizingTarget) работает - по крайней мере, так оно и было раньше, и случай, с которым я боролся выше.

...