CODEWITHSUNDEEP
polymerlit-elementlit-html
Andre
Andre

Reputation: 1322

Lit-Element doesn't let me set property value in html

I have a issue with a as specific element I'm working on. And for some reason this one doesn't let me specify any property values on the html tag.

If I specify defaults in the contructor, then the element works fine with those defaults, but I cannot override the defaults via declarative html.

This is the element:

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);

I try to use the element above like this: <ostinato-fetch-triggers xhr-selector="#somethingElse"></ostinato-fetch-triggers>.

What I expect is that the xhrTriggers property in the element should be #somethingElse, but this is not the case. It basically just uses the default from the constructor.

Upvotes: 0

Views: 3483

Answers (1)

User 28
User 28

Reputation: 5158

First: Since the lit-element didn't have the concept to map property name to attribute name by convert camel-case to dash-case like in Polymer 2. So if you declare xhrSelector, you must use:

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

Second: The connectedCallback is a native lifecycle callback not from lit-element which means there is no guarantee when it invoked the lit-element is already set the properties. You can use firstUpdated(changedProperties) or update(changedProperties) if you want to react each time of property changed.

See more about lit-element lifecycle.

Third: In disconnectedCallback, it seems you want to remove the listener but this will not work because every time you execute bind function it will return the new function which mean you try to remove the function that never be added before.

You should keep the listener in some variable

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

then in disconnectedCallback

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

Upvotes: 2

Related Questions