diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 2130065..068183d 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -82,11 +82,12 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor #updating: false | Promise = false get #lang() { - return ( - this.closest('[lang]')?.getAttribute('lang') || - this.ownerDocument.documentElement.getAttribute('lang') || - 'default' - ) + const lang = this.closest('[lang]')?.getAttribute('lang') || this.ownerDocument.documentElement.getAttribute('lang') + try { + return new Intl.Locale(lang ?? '').toString() + } catch { + return 'default' + } } #renderRoot: Node = this.shadowRoot ? this.shadowRoot : this.attachShadow ? this.attachShadow({mode: 'open'}) : this diff --git a/test/relative-time.js b/test/relative-time.js index b00e592..0d13096 100644 --- a/test/relative-time.js +++ b/test/relative-time.js @@ -434,6 +434,17 @@ suite('relative-time', function () { }) } + test('renders correctly when given an invalid lang', async () => { + const now = new Date().toISOString() + + const element = document.createElement('relative-time') + element.setAttribute('datetime', now) + element.setAttribute('lang', 'does-not-exist') + + await Promise.resolve() + assert.equal(element.shadowRoot.textContent, 'now') + }) + suite('[tense=past]', function () { test('always uses relative dates', async () => { freezeTime(new Date(2033, 1, 1))