Problems with Customizable Select in Solidjs

[zOadT]

Hey everyone! Chrome 135 shipped with support for customizable select elements. It allows you to include rich HTML in <select> elements and have more styling options. An example of a typical DOM structure would be:

<select>
  <button>
    <selectedcontent />
    <span>More stuff...</span>
  </button>
  <option>
    <svg>...</svg>
    Option1
  </option>
  <option>
    <svg>...</svg>
    Option2
  </option>
</select>

The nice thing is that in browsers that do not support customizable select, the button element will be ignored and we fall back to an ordinary select.

I tried using it in one project with solidjs, but ran into two issues:

1. The html-nesting checker still validates the previous rules (I already created an issue for that Support customizable select elements MananTank/validate-html-nesting#11)

2. Even if you disable the checker (for SolidStart set solid.solid.validate to false) rendering the above html snippet will throw with some _el$2 is null error in browsers that to not support rich HTML in select elements, probably because solid wants to attach elements to the button that won't be present in their DOM.

The issue can be solved manually, by doing something like:

const customizableSelectSupported = CSS.supports("appearance", "base-select");

export default function Select() {
  return (
    <select>
      <Show when={customizableSelectSupported}>
        <button>
          <selectedcontent />
          <span>More stuff...</span>
        </button>
      </Show>
      // ...
    </select>
  );
}

But I feel like this could be easily missed by developers especially when customizable select gets wider support. On the other hand, handling this as special case in solid would seem weird to me and I suspect some general solution to this problem would have some performance hit.

Note: I didn't post this as bug because I think it is intended that solid only works for valid html nesting and I am fine using the <Show> solution. But wanted to share it in case anybody comes up with a better solution.

[johnnybenson]

There are pull requests pending to update the checker with support for customizable select

MananTank/validate-html-nesting#13
MananTank/validate-html-nesting#14