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

…lightdom-textcontent ensure invalid dates fallback to lightdom textcontent
github · Nov 15, 2022 · 30138d7 · 30138d7
2 parents 1be3d31 + c9ae2a7
commit 30138d7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/src/relative-time-element.ts b/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) {

diff --git a/test/relative-time.js b/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)