diff --git a/examples/index.html b/examples/index.html index d671479..13d91ba 100644 --- a/examples/index.html +++ b/examples/index.html @@ -193,6 +193,13 @@

Localised Dates

+

+ Lazily added datetime via setAttribute + + This will display in one second. + +

+ diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 660b169..2130065 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -426,6 +426,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor this.#updating = (async () => { await Promise.resolve() this.update() + this.#updating = false })() } } @@ -472,7 +473,6 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor } else { dateObserver.unobserve(this) } - this.#updating = false } } diff --git a/test/relative-time.js b/test/relative-time.js index e139bee..92b3ba5 100644 --- a/test/relative-time.js +++ b/test/relative-time.js @@ -70,6 +70,15 @@ suite('relative-time', function () { assert.equal(counter, 1) }) + test('calls update even after nullish datetime', async () => { + const el = document.createElement('relative-time') + el.setAttribute('datetime', '') + await new Promise(resolve => setTimeout(resolve, 10)) + el.setAttribute('datetime', new Date().toISOString()) + await Promise.resolve() + assert(el.shadowRoot.textContent.length > 0, 'should have set time, but textContent is empty') + }) + test('sets title back to default if removed', async () => { const el = document.createElement('relative-time') el.setAttribute('datetime', new Date().toISOString())