perf: skip redundant render-root and title writes on no-op ticks

The shared dateObserver ticks every registered <relative-time> on a single timer, calling update() on each. update() unconditionally rebuilt the [part=root] span via replaceChildren and re-set the title attribute even when the computed text/title were identical to what was already rendered (common on periodic ticks, e.g. an item that still reads "3mo").

Guard #updateRenderRootContent to reuse the existing span when the content and aria-hidden state are unchanged, and skip setAttribute('title') when the title is unchanged. This avoids needless DOM churn and style invalidation on every no-op tick.

Author: mattcosta7

src/relative-time-element.ts

@@ -364,13 +364,28 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
   }
 
   #updateRenderRootContent(content: string | null): void {
+    const root = this.#renderRoot as Element
+    const ariaHidden = this.hasAttribute('aria-hidden') && this.getAttribute('aria-hidden') === 'true'
+    // Avoid dirtying the DOM (and invalidating layout) when nothing has changed.
+    // This is common on periodic ticks where the rendered text is identical to
+    // the previous tick (e.g. an item that still reads "3mo").
+    const current = root.firstElementChild
+    if (
+      current &&
+      root.childNodes.length === 1 &&
+      current.getAttribute('part') === 'root' &&
+      current.textContent === content &&
+      (current.getAttribute('aria-hidden') === 'true') === ariaHidden
+    ) {
+      return
+    }
     const span = document.createElement('span')
     span.setAttribute('part', 'root')
-    if (this.hasAttribute('aria-hidden') && this.getAttribute('aria-hidden') === 'true') {
+    if (ariaHidden) {
       span.setAttribute('aria-hidden', 'true')
     }
     span.textContent = content
-    ;(this.#renderRoot as Element).replaceChildren(span)
+    root.replaceChildren(span)
   }
 
   #shouldDisplayUserPreferredAbsoluteTime(format: ResolvedFormat): boolean {
@@ -626,7 +641,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     const now = Date.now()
     if (!this.#customTitle) {
       newTitle = this.#getFormattedTitle(date) || ''
-      if (newTitle && !this.noTitle) this.setAttribute('title', newTitle)
+      if (newTitle && !this.noTitle && newTitle !== oldTitle) this.setAttribute('title', newTitle)
     }
 
     const duration = elapsedTime(date, this.precision, now)

test/relative-time.js

@@ -109,6 +109,37 @@ suite('relative-time', function () {
     assert.equal(counter, 1)
   })
 
+  test('does not rebuild the render root when the displayed text is unchanged', async () => {
+    const el = document.createElement('relative-time')
+    el.setAttribute('datetime', new Date(Date.now() - 3 * 60 * 1000).toISOString())
+    fixture.append(el)
+    await Promise.resolve()
+    const root = el.shadowRoot.querySelector('[part="root"]')
+    assert.ok(root, 'expected a rendered [part="root"] element')
+    const text = root.textContent
+
+    // A subsequent update that produces the same text must not replace the node.
+    el.update()
+    await Promise.resolve()
+    const rootAfter = el.shadowRoot.querySelector('[part="root"]')
+    assert.equal(rootAfter, root, 'render root node should be reused when text is unchanged')
+    assert.equal(rootAfter.textContent, text)
+  })
+
+  test('rebuilds the render root when the displayed text changes', async () => {
+    const el = document.createElement('relative-time')
+    el.setAttribute('datetime', new Date(Date.now() - 3 * 60 * 1000).toISOString())
+    fixture.append(el)
+    await Promise.resolve()
+    const root = el.shadowRoot.querySelector('[part="root"]')
+    const text = root.textContent
+
+    el.setAttribute('datetime', new Date(Date.now() - 3 * 60 * 60 * 1000).toISOString())
+    await Promise.resolve()
+    const rootAfter = el.shadowRoot.querySelector('[part="root"]')
+    assert.notEqual(rootAfter.textContent, text, 'text should have changed')
+  })
+
   test('calls update even after nullish datetime', async () => {
     const el = document.createElement('relative-time')
     el.setAttribute('datetime', '')