It resets complex property to undefined when provided as second or later prop

[xPapay]

Hi. Firstly, thank you all for your amazing work on the preactjs project!

When I set a complex property (callback) AFTER at least one other property Then the complex property become undefined.

All complex properties become undefined, unless the complex property is the first property set.

I wrote failing test to explain better. (See attached diff file)

TLDR;

// this works as expected
<dummy-button zz={() => console.log('zz')}  aa="123" ></dummy-button>

// and this doesn't
<dummy-button aa="123" zz={() => console.log('zz')} ></dummy-button>
// zz become eventually undefined

Also one other thing I've noticed when I tried to debug this is that connectedCallback is called multiple times and the complex properties are reset right after the connectedCallback is called. I don't know yet why connectedCallback is called multiple times, but I if it's called I would expect disconnectedCallback to be called before connectedCallback is called second time. But it's never called.

When I forcefully prevent the connecting new vdom if we already connected one, then it works as expected. But I would rather understand what causes the element to connect to dom second time, and if we should set there the same properties we already set (same as we do in attributeChangedCallback when we cloning the previous vdom).

version: 4.2.1

Git diff file: preact-custom-element-bug.txt

diff --git a/src/index.js b/src/index.js
index 42318d7..41374e8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -63,6 +63,7 @@ function ContextProvider(props) {
 }

 function connectedCallback() {
+   // if (this._vdom) return; // prevent from resetting vdom if we already have one, and connected callback was called second time
    // Obtain a reference to the previous context by pinging the nearest
    // higher up node that was rendered with Preact. If one Preact component
    // higher up receives our ping, it will set the `detail` property of
diff --git a/src/index.test.jsx b/src/index.test.jsx
index 00da646..fba77d3 100644
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -130,6 +130,33 @@ describe('web components', () => {
            });
            assert.equal(other, 1);
        });
+
+       it('sets complex property after simple property', () => {
+           const el = document.createElement('x-dummy-button');
+
+           // set simple property first
+           el.text = 'click me';
+
+           let clicks = 0;
+           const onClick = () => clicks++;
+           el.onClick = onClick;
+
+           assert.equal(el.text, 'click me');
+           assert.equal(el.onClick, onClick);
+
+           root.appendChild(el);
+           assert.equal(
+               root.innerHTML,
+               '<x-dummy-button text="click me"><button>click me</button></x-dummy-button>'
+           );
+
+           act(() => {
+               el.querySelector('button').click();
+           });
+
+           assert.equal(el.onClick, onClick);
+           assert.equal(clicks, 1);
+       });
    });

    function Foo({ text, children }) {

[trygveaa]

Also one other thing I've noticed when I tried to debug this is that connectedCallback is called multiple times and the complex properties are reset right after the connectedCallback is called. I don't know yet why connectedCallback is called multiple times, but I if it's called I would expect disconnectedCallback to be called before connectedCallback is called second time. But it's never called.

I took a look into this. It turns out that the browser only calls connectedCallback once, which is why you're not seeing any calls to disconnectedCallback. However preact-custom-element also calls connectedCallback itself the first time a setter is called, which is why the function ends up being called twice. I'm not sure why that call was added, it doesn't really seem like the correct thing to do.