chore: improve select dev page, add custom renderer example (#9567)

Author: web-padawan

dev/select.html

@@ -28,21 +28,24 @@ <h2 class="heading">Bells & Whistles</h2>
         label="Label"
         helper-text="Description for this field."
         value="s"
-        clear-button-visible
         error-message="You need to write something in this field."
         required
       >
         <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
       </vaadin-select>
     </section>
 
+    <section>
+      <h2 class="heading">Custom renderer</h2>
+      <vaadin-select id="custom" value="s"></vaadin-select>
+    </section>
+
     <section class="section">
       <h2 class="heading">States</h2>
       <vaadin-select
         label="Read-only"
         helper-text="Description for this field."
         value="s"
-        clear-button-visible
         error-message="You need to write something in this field."
         required
         readonly
@@ -54,7 +57,6 @@ <h2 class="heading">States</h2>
         label="Disabled"
         helper-text="Description for this field."
         value="s"
-        clear-button-visible
         error-message="You need to write something in this field."
         required
         disabled
@@ -63,17 +65,38 @@ <h2 class="heading">States</h2>
       </vaadin-select>
     </section>
 
-    <script>
+    <script type="module">
+      import { html, render } from 'lit';
+
       document.querySelectorAll('vaadin-select').forEach((select) => {
-        select.items = items = [
-          { label: 'Show all', value: 'all' },
-          { component: 'hr' },
-          { label: 'XS (out of stock)', value: 'xs', disabled: true },
-          { label: 'S', value: 's' },
-          { label: 'M', value: 'm' },
-          { label: 'L', value: 'l' },
-          { label: 'XL', value: 'xl' },
-        ];
+        if ((select.id = 'custom')) {
+          select.renderer = (root) => {
+            render(
+              html`
+                <vaadin-select-list-box>
+                  <vaadin-select-item value="all">Show all</vaadin-select-item>
+                  <hr />
+                  <vaadin-select-item value="xs" disabled>XS (out of stock)</vaadin-select-item>
+                  <vaadin-select-item value="s">S</vaadin-select-item>
+                  <vaadin-select-item value="m">M</vaadin-select-item>
+                  <vaadin-select-item value="l">L</vaadin-select-item>
+                  <vaadin-select-item value="xl">XL</vaadin-select-item>
+                </vaadin-select-list-box>
+              `,
+              root,
+            );
+          };
+        } else {
+          select.items = [
+            { label: 'Show all', value: 'all' },
+            { component: 'hr' },
+            { label: 'XS (out of stock)', value: 'xs', disabled: true },
+            { label: 'S', value: 's' },
+            { label: 'M', value: 'm' },
+            { label: 'L', value: 'l' },
+            { label: 'XL', value: 'xl' },
+          ];
+        }
       });
     </script>
   </body>