fixes #796

docs/resources/changelog.md

@@ -13,6 +13,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the `required` attribute to `<sl-radio-group>` and fixed constraint validation logic to support custom validation
 - Added the `checked-icon` part to `<sl-menu-item>`
 - Fixed a bug where a duplicate clear button showed in Firefox [#791](https://github.com/shoelace-style/shoelace/issues/791)
+- Fixed a bug where setting `valueAsDate` or `valueAsNumber` too early on `<sl-input>` would throw an error [#796](https://github.com/shoelace-style/shoelace/issues/796)
 - Updated the `fieldset` attribute so it reflects in `<sl-radio-group>`
 
 ## 2.0.0-beta.76

src/components/input/input.ts

@@ -161,8 +161,11 @@ export default class SlInput extends LitElement {
   }
 
   set valueAsDate(newValue: Date | null) {
-    this.input.valueAsDate = newValue;
-    this.value = this.input.value;
+    // We use an in-memory input instead of the one in the template because the property can be set before render
+    const input = document.createElement('input');
+    input.type = 'date';
+    input.valueAsDate = newValue;
+    this.value = input.value;
   }
 
   /** Gets or sets the current value as a number. */
@@ -171,8 +174,11 @@ export default class SlInput extends LitElement {
   }
 
   set valueAsNumber(newValue: number) {
-    this.input.valueAsNumber = newValue;
-    this.value = this.input.value;
+    // We use an in-memory input instead of the one in the template because the property can be set before render
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.valueAsNumber = newValue;
+    this.value = input.value;
   }
 
   firstUpdated() {