Preact failed to render webcomponent (Failed to execute 'createElementNS')

[Akiyamka]

• Check if updating to the latest Preact version resolves the issue
  preact@10.25.3

Describe the bug
Attempt to use @honatas/multi-select-webcomponent package broke preact render

To Reproduce

import MultiselectWebcomponent from '@honatas/multi-select-webcomponent';

window.customElements.define('multi-select', MultiselectWebcomponent);

export function MultiSelectInput<T>({
  options,
}) {
  return (
    <multi-select
      id="planetIds"
      class="border"
      selecteditem="badge bg-primary pt-1 m-1"
      dropdown="border"
      dropdownitem="p-1"
      selectallbutton="btn btn-sm btn-light"
      selectallbuttonspan="bi-check2-all text-success"
      clearbutton="btn btn-sm btn-light"
      clearbuttonspan="bi-x-circle text-danger"
    >
      {options.value.map((option) => (
        <option value={option.value}>{option.label}</option>
      ))}
    </multi-select>
  );
}

Error:

Uncaught NotSupportedError: Failed to execute 'createElementNS' on 'Document': The result must not have attributes

Error point to next line in preact source code
https://github.com/preactjs/preact/blob/main/src/diff/index.js#L436

Expected behavior
Preact able to render custom tags

[JoviDeCroock]

I think this bug has been introduced in #4364 we should call the non namespace equivalent here.

All though thinking about it more, this error seems to imply that we set attributes durint element construction. Did this work in older versions? Might actually be an issue with that custom element as well

[rschristian]

Quick search seems to hint this is an issue with the lib, rather than us: Honatas/multi-select-webcomponent#1

Edit: Yep, that lib is faulty and that linked issue goes into how you can fix it if you wanted to, but would require forking/patching. Minimal repro:

class MyCustomElement extends HTMLElement {
    constructor() {
        super();
        this.className = 'foo';
    }
}

window.customElements.define('my-custom-element', MyCustomElement);
document.createElementNS('http://www.w3.org/1999/xhtml', `my-custom-element`);

You cannot add (potentially modify either?) attributes or children from constructors:

The element must not gain any attributes or children, as this violates the expectations of consumers who use the createElement or createElementNS methods.

Spec

This is why connectedCallback exists and is where these sorts of things need to happen.

[Akiyamka]

@rschristian thank you for investigation, you right, it's not preact issue