Merge pull request #341 from silverwind/part

feat: expose `part=root` for external CSS targeting

Author: siddharthkp

README.md

@@ -284,6 +284,20 @@ Lang is a [built-in global attribute](https://developer.mozilla.org/en-US/docs/W
 
 Adding the `no-title` attribute will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so not adding a title attribute allows a user to create a custom, accessible tooltip if one is desired.
 
+## Styling
+
+The element renders its text inside a Shadow DOM `<span>` with a [`part="root"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part) attribute. This allows you to style the element inside the Shadow DOM from outside using the `::part()` CSS pseudo-element:
+
+```css
+relative-time::part(root) {
+  color: rebeccapurple;
+  font-weight: bold;
+}
+relative-time::part(root)::selection {
+  background: lightgreen;
+}
+```
+
 ## Browser Support
 
 Browsers without native [custom element support][support] require a [polyfill][ce-polyfill].

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', 'root')
     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

@@ -2122,7 +2122,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 () => {
@@ -2132,7 +2131,30 @@ 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="root"', 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'), 'root')
+    })
+
+    test('shadow root span has part="root" alongside aria-hidden="true"', async () => {
+      const now = new Date().toISOString()
+      const time = document.createElement('relative-time')
+      time.setAttribute('datetime', now)
+      time.setAttribute('aria-hidden', 'true')
+      await Promise.resolve()
+
+      const span = time.shadowRoot.querySelector('span')
+      assert.equal(span.getAttribute('part'), 'root')
+      assert.equal(span.getAttribute('aria-hidden'), 'true')
     })
   })