justin-schroeder/arrow-js

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:

Screenshot 2023-08-28 at 2 36 52 PM

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.

srm038 commented

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.