lazy eval and share input instances in input component

docs/pages/resources/changelog.md

@@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
+- `<sl-input>` now lazily evaluates and shares hidden date / number inputs across components to improve performance. [#19]
 - Fixed a bug in `<sl-split-panel>` that caused it not to recalculate it's position when going from being `display: none;` to its original display value. [#1942]
 - Fixed a bug in `<dialog>` where when it showed it would cause a layout shift. [#1967]
 - Fixed a bug in `<sl-tooltip>` that allowed unwanted text properties to leak in [#1947]
@@ -1745,4 +1746,4 @@ The following pages demonstrate why this change was necessary.
 
 ## 2.0.0-beta.1
 
-- Initial release
+- Initial release

src/components/input/input.component.ts

@@ -54,6 +54,8 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
   static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
   static dependencies = { 'sl-icon': SlIcon };
 
+  protected static __sharedInput: null | HTMLInputElement = null
+
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['sl-blur', 'sl-input']
   });
@@ -65,8 +67,23 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
   @state() private hasFocus = false;
   @property() title = ''; // make reactive to pass through
 
-  private __numberInput = Object.assign(document.createElement('input'), { type: 'number' });
-  private __dateInput = Object.assign(document.createElement('input'), { type: 'date' });
+  private get __numberInput () {
+    const ctor = (this.constructor as unknown as typeof SlInput)
+    if (ctor.__sharedInput === null) ctor.__sharedInput = document.createElement("input")
+
+    const input = ctor.__sharedInput
+    input.type = "number"
+    return input
+  }
+
+  private get __dateInput () {
+    const ctor = (this.constructor as unknown as typeof SlInput)
+    if (ctor.__sharedInput === null) ctor.__sharedInput = document.createElement("input")
+
+    const input = ctor.__sharedInput
+    input.type = "date"
+    return input
+  }
 
   /**
    * The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults