Merge pull request #235 from github/avoid-throwing-errors-for-empty-lang-attributes

avoid throwing errors for empty lang attributes

Author: keithamus

src/relative-time-element.ts

@@ -78,7 +78,11 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
   #updating: false | Promise<void> = false
 
   get #lang() {
-    return this.closest('[lang]')?.getAttribute('lang') ?? 'default'
+    return (
+      this.closest('[lang]')?.getAttribute('lang') ||
+      this.ownerDocument.documentElement.getAttribute('lang') ||
+      'default'
+    )
   }
 
   #renderRoot: Node = this.shadowRoot ? this.shadowRoot : this.attachShadow ? this.attachShadow({mode: 'open'}) : this

test/relative-time.js

@@ -27,6 +27,7 @@ suite('relative-time', function () {
   suiteSetup(() => {
     fixture = document.createElement('div')
     document.body.appendChild(fixture)
+    document.documentElement.lang = 'en'
   })
 
   teardown(() => {
@@ -249,6 +250,24 @@ suite('relative-time', function () {
     assert.equal(time.shadowRoot.textContent, 'in 2 days')
   })
 
+  test('uses html lang if given lang is invalid', async () => {
+    const time = document.createElement('relative-time')
+    time.setAttribute('datetime', new Date())
+    time.setAttribute('lang', '')
+    document.documentElement.lang = 'es'
+    await Promise.resolve()
+    assert.equal(time.shadowRoot.textContent, 'ahora')
+  })
+
+  test('ignores empty lang attributes', async () => {
+    const time = document.createElement('relative-time')
+    time.setAttribute('datetime', new Date())
+    time.setAttribute('lang', '')
+    document.documentElement.lang = ''
+    await Promise.resolve()
+    assert.equal(time.shadowRoot.textContent, 'now')
+  })
+
   suite('[threshold]', function () {
     test('switches to dates after 30 past days with default threshold', async () => {
       const now = new Date(Date.now() - 31 * 60 * 60 * 24 * 1000).toISOString()