Lit-Element не позволяет мне устанавливать значение свойства в html

Question

У меня проблема с конкретным элементом, над которым я работаю.И по какой-то причине это не позволяет мне указывать какие-либо значения свойств в теге html.

Если я задаю значения по умолчанию в конструкторе, тогда элемент работает с этими значениями по умолчанию, но я не могу переопределить значения по умолчанию с помощьюдекларативный html.

Это элемент:

class OstinatoFetchTriggers extends LitElement {
  static get properties() {
    return {
      /**
        * The query selector for the `ostinato-fetch` element to use when
        * making the request.
        */
      xhrSelector: { type: String },

      /**
      * Elements with the trigger selector will have their click event
      * intercepted and will make the request via ostinato-fetch
      */
      triggerSelector: { type: String },
    };
  }


  constructor() {
    super();
    this.xhrSelector = '#xhrContent';
    this.triggerSelector = '[xhr-link]';
  }

  connectedCallback() {
    super.connectedCallback();

    // The output for console log below is null or whatever the default was in the contructor.
    console.log(this.triggerSelector);

    var triggerList = document.querySelectorAll(this.triggerSelector);
    triggerList.forEach((trigger) => {
      trigger.addEventListener('click', this._handleXhrClick.bind(this));
    });
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    var triggerList = document.querySelectorAll(this.triggerSelector);
    triggerList.forEach((trigger) => {
      trigger.removeEventListener('click', this._handleXhrClick.bind(this));
    });
  }

  _handleXhrClick(ev) {
    ev.preventDefault();
    this.triggerRequest(ev.currentTarget.href);
  }

  triggerRequest(href) {
    document.querySelector(this.xhrSelector).fetch(href);
  }
}

customElements.define('ostinato-fetch-triggers', OstinatoFetchTriggers);

Я пытаюсь использовать вышеуказанный элемент следующим образом: <ostinato-fetch-triggers xhr-selector="#somethingElse"></ostinato-fetch-triggers>.

Я ожидаю, что xhrTriggersсвойство в элементе должно быть #somethingElse, но это не так.В основном он просто использует значение по умолчанию из конструктора.

Answer 1

Первое: поскольку у lit-элемента не было концепции сопоставления имени свойства с именем атрибута путем преобразования casel-case в dash-case, как в Polymer 2. Поэтому, если вы объявляете xhrSelector, вы должны использовать:

<ostinato-fetch-triggers xhrSelector="#somethingElse"></ostinato-fetch-triggers>

---

Секунда: connectedCallback является собственным обратным вызовом жизненного цикла , а не lit-element, что означает, что нет никакой гарантии, что при вызове lit-element уже установленосвойства.Вы можете использовать firstUpdated(changedProperties) или update(changedProperties), если хотите реагировать каждый раз при изменении свойства.

Подробнее о lit-element жизненный цикл .

---

Третье: в disconnectedCallback кажется, что вы хотите удалить слушателя, но это не сработает, потому что каждый раз, когда вы выполняете функцию bind, она возвращает новую функцию, что означает, что вы пытаетесь удалить функцию, которая никогда не была добавлена ​​ранее.

Вы должны держать слушателя в некоторой переменной

let listener = this._handleXhrClick.bind(this)
trigger.addEventListener('click', listener)
this.listeners.push({ trigger, listener })

, затем в disconnectedCallback

this.listeners.forEach(({ trigger, listener }) => {
  listener.removeEventListener('click', listener)
})