feat: expose part=root for external CSS targeting

[silverwind]

Resolves #259.

Firefox does not propagate custom ::selection styling into shadow DOM. To enable styling the selection color inside <relative-time>, expose a root part which refers to the root <span> of the element which can then be targeted by CSS.

The root <span> now always renders, even in the absence of aria-hidden, but that shouldn't cause any issues because Shadow DOM still encapsulates the content.

Example before and after with this CSS:

::selection,
relative-time::part(root)::selection {
  background: lightgreen;
}

[Copilot]

Pull request overview

This PR addresses Firefox-specific issues with text selection styling in shadow DOM by exposing a CSS part="text" attribute on the element's internal span. Firefox does not propagate custom ::selection styling into shadow DOM, so this change enables external CSS to target the element's text content using relative-time::part(text)::selection.

Changes:

• Modified the element to always render a root <span> with part="text" attribute in the shadow DOM
• Updated tests to reflect that a span element is now always present
• Added test coverage to verify the part="text" attribute exists

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/relative-time-element.ts	Refactored #updateRenderRootContent to always create a span element with part="text", rather than conditionally creating it only when aria-hidden is true
test/relative-time.js	Removed assertions checking for absence of span element, and added test suite for the new part attribute

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[keithamus]

Firefox does not propagate custom ::selection styling into shadow DOM.

https://bugzilla.mozilla.org/show_bug.cgi?id=2016387

[silverwind]

Firefox does not propagate custom ::selection styling into shadow DOM.

https://bugzilla.mozilla.org/show_bug.cgi?id=2016387

Thanks. I still think it's worth to pursue this change because as we know, Browser bugs can take years to be fixed.

[keithamus]

Sure, just closing the loop.

[siddharthkp]

@silverwind There's a failing test for you :)

[silverwind]

@siddharthkp it's a pre-existing flakyness on main branch, #342 will fix it.

[siddharthkp]

@silverwind Great! I've merged that in main and backmerged main here

[silverwind]

Thanks, branch should go green after latest main merge now.

[siddharthkp]

LGTM!

[silverwind]

@siddharthkp for next merge, I suggest you merge with "squash" because you got some of the intermediate commits now on main.