Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Element property syntax not working #86

Open
markmals opened this issue Aug 28, 2023 · 1 comment
Open

Element property syntax not working #86

markmals opened this issue Aug 28, 2023 · 1 comment

Comments

@markmals
Copy link

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
Copy link

srm038 commented Dec 5, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants