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.