Do not convert duration or elapsed

Author: khiga8

src/relative-time-element.ts

@@ -122,7 +122,6 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       'title',
       'aria-hidden',
       'time-zone',
-      'enable-user-time-preference'
     ]
   }
 
@@ -354,14 +353,6 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     this.setAttribute('time-zone-name', value || '')
   }
 
-  get enableUserTimePreference(): boolean {
-    return this.hasAttribute('enable-user-time-preference')
-  }
-
-  set enableUserTimePreference(value: boolean | undefined) {
-    this.toggleAttribute('enable-user-time-preference', value)
-  }
-
   /** @deprecated */
   get prefix(): string {
     return this.getAttribute('prefix') ?? (this.format === 'datetime' ? '' : 'on')
@@ -499,9 +490,9 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     const format = this.#resolveFormat(duration)
     let newText = oldText
 
-    // Check if user preference is enabled.
-    const userPrefersAbsoluteTime = this.ownerDocument.documentElement.querySelector('[data-prefers-absolute-time]')?.getAttribute('data-prefers-absolute-time') === 'true'
-    if (userPrefersAbsoluteTime) {
+    // Experimental: Enable absolute time based on user preference
+    const userPrefersAbsoluteTime = (this.closest('[data-prefers-absolute-time]')?.getAttribute('data-prefers-absolute-time') === 'true') || this.ownerDocument.documentElement.getAttribute('data-prefers-absolute-time') === 'true'
+    if (userPrefersAbsoluteTime && format !== 'duration') {
       newText = this.#getUserPrefersAbsoluteTime(date)
     } else {
       if (format === 'duration') {

test/relative-time.js

@@ -1884,6 +1884,45 @@ suite('relative-time', function () {
     }
   })
 
+  suite('experimental: [data-prefers-absolute-time]', async () => {
+    test('formats with absolute time when data-prefers-absolute-time="true"', async () => {
+      document.documentElement.setAttribute('data-prefers-absolute-time', 'true')
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2022-01-01T12:00:00.000Z')
+      await Promise.resolve()
+
+      assert.match(el.shadowRoot.textContent, /[A-Z][a-z]{2} \d{1,2}, \d{4}, \d{1,2}:\d{2} (AM|PM)/)
+    })
+
+    test('does not format with absolute time when format is elapsed or duration', async () => {
+      document.documentElement.setAttribute('data-prefers-absolute-time', 'true')
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2022-01-01T12:00:00.000Z')
+      el.setAttribute('format', 'elapsed')
+      await Promise.resolve()
+
+      assert.notMatch(el.shadowRoot.textContent, /[A-Z][a-z]{2} \d{1,2}, \d{4}, \d{1,2}:\d{2} (AM|PM)/)
+    })
+
+    test('does not format with absolute time when data-prefers-absolute-time="false"', async () => {
+      document.documentElement.setAttribute('data-prefers-absolute-time', 'false')
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', new Date(Date.now() - 3 * 60 * 60 * 24 * 1000).toISOString())
+      await Promise.resolve()
+
+      assert.equal(el.shadowRoot.textContent, '3 days ago')
+    })
+
+    test('does not format with absolute time when data-prefers-absolute-time is not set', async () => {
+      document.documentElement.setAttribute('data-prefers-absolute-time', 'false')
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', new Date(Date.now() - 3 * 60 * 60 * 24 * 1000).toISOString())
+      await Promise.resolve()
+
+      assert.equal(el.shadowRoot.textContent, '3 days ago')
+    })
+  })
+
   suite('[aria-hidden]', async () => {
     test('[aria-hidden="true"] applies to shadow root', async () => {
       const now = new Date().toISOString()