[🐞] `Error: Code(6): Set property` on dynamic element tags with Qwik release 0.22.0

[DustinJSilk]

Which component is affected?

Qwik Runtime

Describe the bug

After upgrading to the latest dev release of Qwik and Qwik city (0.22 & 0.6.1), using a dynamic element tag causes a breaking error to be thrown when the dom updates.

For example, this no longer works:

export type TitleProps = {
  tag?: "h1" | "h2";
};

export const Title = component$((props: TitleProps) => {
  const Tag = props.tag ?? "h1";

  return (
    <Tag>
      <Slot />
    </Tag>
  );
});

Reproduction

https://github.com/DustinJSilk/qwik-issue-custom-tag/blob/main/src/routes/flower/layout.tsx

Steps to reproduce

Please see the layout file linked in the reproduction url.

install and run the app, and navigate through the pages. See errors in the console.

System Info

System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 238.10 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 7.13.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 110.0.1
    Safari: 15.1
  npmPackages:
    @builder.io/qwik: 0.22.0-dev20230316094845 => 0.22.0-dev20230316094845 
    @builder.io/qwik-city: 0.5.3 => 0.5.3 
    undici: 5.20.0 => 5.20.0 
    vite: 4.1.4 => 4.1.4

Additional Information

This was working on the previous latest versions

[manucorporat]

could you provide a simpler repo case? just a component with a button that triggers the issue?

[DustinJSilk]

Sure give me 5 minutes and ill push an update

[manucorporat]

Managed to reproduce with this:

export const Title = component$((props: TitleProps) => {
  const Tag = props.tag ?? "h1";

  return (
    <Tag>
      Hello {Tag}
    </Tag>
  );
});

export const Issue3398 = component$(() => {

  const tag = useSignal<"h1" | "h2">("h1");
  return (
    <div>
      <button onClick$={() => tag.value = tag.value === "h1" ? "h2" : "h1"}>Toggle tag</button>
      <Title tag={tag.value}></Title>
    </div>
  );
});

working on a fix!

[DustinJSilk]

You beat me to it! haha Awesome thanks @manucorporat !