Element property syntax not working
markmals opened this issue · 1 comments
It appears that IDL attribute handling in Arrow templates is broken in v1.0.0-alpha.9
. I expected the following code to call the setter for complexProp
on Test
and that logging the value in connectedCallback
would provide the correct value:
class Test extends HTMLElement {
#prop;
set complexProp(newValue) {
this.#prop = newValue;
}
connectedCallback() {
console.log(this.#prop.bar); // does not log
}
}
customElements.define("app-test", Test);
let template = html`
<app-test .complexProp="${{ foo: "something", bar: "something else" }}"></app-test>
`;
template(document.getElementById("app"));
Instead, the value is still undefined, and in the markup, it appears Arrow is treating .complexProp
as an attribute and attempting to serialize it as [Object object]
instead:
The same issue occurs if you use a class instance variable instead of a setter and if you use an arrow expression in the template instead of a static expression.
I'm experiencing the same issue. Custom IDL attributes will not pass through the template.
import { reactive, html } from 'https://esm.sh/@arrow-js/core';
if ('customElements' in window) {
customElements.define(
'custom-element',
class Test extends HTMLElement {
value;
constructor() {
super();
}
get value() {
return this.value;
}
set value(value) {
this.value = value;
}
connectedCallback() {
console.log(this.value);
}
}
);
}
const render = html`<custom-element .value="${() => 1}"></custom-element>`;
render(document.querySelector('body'));
results in the following DOM (and undefined
logged in console):
<custom-element .value="<!--➳❍-->"></custom-element>
This is occurring on both v1.0.0-alpha.8
and v1.0.0-alpha.9
.