feat: expose part=root for external CSS targeting

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')
  })
  })