Merge pull request #203 from github/ensure-invalid-dates-fallback-to-lightdom-textcontent

ensure invalid dates fallback to lightdom textcontent

Author: keithamus

src/relative-time-element.ts

@@ -331,6 +331,9 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
     newText = this.getFormattedDate(now) || ''
     if (newText) {
       this.#renderRoot.textContent = newText
+    } else if (this.shadowRoot === this.#renderRoot && this.textContent) {
+      // Ensure invalid dates fall back to lightDOM text content
+      this.#renderRoot.textContent = this.textContent
     }
 
     if (newText !== oldText || newTitle !== oldTitle) {

test/relative-time.js

@@ -58,6 +58,13 @@ suite('relative-time', function () {
     assert.equal(counter, 1)
   })
 
+  test('shadowDOM reflects textContent with invalid date', () => {
+    const el = document.createElement('relative-time')
+    el.textContent = 'A date string'
+    el.setAttribute('datetime', 'Invalid')
+    if (el.shadowRoot) assert.equal(el.shadowRoot.textContent, el.textContent)
+  })
+
   test('updates the time automatically when it is a few seconds ago', async function () {
     // eslint-disable-next-line @typescript-eslint/no-invalid-this
     this.timeout(3000)