feat: expose part=root for external CSS targeting

src/relative-time-element.ts

@@ -272,14 +272,13 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
   }
 
   #updateRenderRootContent(content: string | null): void {
+    const span = document.createElement('span')
+    span.setAttribute('part', 'text')
     if (this.hasAttribute('aria-hidden') && this.getAttribute('aria-hidden') === 'true') {
-      const span = document.createElement('span')
       span.setAttribute('aria-hidden', 'true')
-      span.textContent = content
-      ;(this.#renderRoot as Element).replaceChildren(span)
-    } else {
-      this.#renderRoot.textContent = content
     }
+    span.textContent = content
+    ;(this.#renderRoot as Element).replaceChildren(span)
   }
 
   #shouldDisplayUserPreferredAbsoluteTime(format: ResolvedFormat): boolean {

test/relative-time.js

@@ -2121,7 +2121,6 @@ suite('relative-time', function () {
       await Promise.resolve()
 
       assert.isNull(time.shadowRoot.querySelector('[aria-hidden]'), 'Expected no aria-hidden to be present')
-      assert.isNull(time.shadowRoot.querySelector('span'), 'Expected no span to be present')
     })
 
     test('no aria-hidden applies to shadow root', async () => {
@@ -2131,7 +2130,18 @@ suite('relative-time', function () {
       await Promise.resolve()
 
       assert.isNull(time.shadowRoot.querySelector('[aria-hidden]'), 'Expected no aria-hidden to be present')
-      assert.isNull(time.shadowRoot.querySelector('span'), 'Expected no span to be present')
+    })
+  })
+
+  suite('[part]', () => {
+    test('shadow root span has part="text"', async () => {
+      const now = new Date().toISOString()
+      const time = document.createElement('relative-time')
+      time.setAttribute('datetime', now)
+      await Promise.resolve()
+
+      const span = time.shadowRoot.querySelector('span')
+      assert.equal(span.getAttribute('part'), 'text')
     })
   })