search

github / relative-time-element

Web component extensions to the standard <time> element.
https://github.github.io/relative-time-element/examples/
MIT License
3.57k stars 170 forks source link

relative-time doesn't render anything without having an initial datetime value #289

Closed cheshire137 closed 2 months ago

cheshire137 commented 2 months ago

I spoke a bit with @keithamus about this. I have a hidden <relative-time> element on the page that I want to programmatically reveal after I've set its datetime attribute. I learned that if datetime is omitted or left blank, then when I do setAttribute('datetime', nothing appears for the element on the page, and the <relative-time> element has a size of 0x0. If I manually call .update() on the element via my browser console, the '1 minute ago' or whatever timestamp appears as expected. 👍

I have a workaround in that I can set datetime to the current time's ISO8601 string in the static page HTML. Then I found I can programmatically change the datetime attribute value and the updated timestamp appears like I want.

My use case is that I have a <relative-time> element that I want to populate once I know the right timestamp. I'm getting a timestamp from localstorage, so I have to check if the value exists and, if so, update datetime on the relative-time and display it.