diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index e7c9d47..c48f9f9 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -710,7 +710,11 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor const hourCycle = this.hourCycle if (!this.#customTitle) { newTitle = this.#getFormattedTitle(date, locale, timeZone, hourCycle) || '' - if (newTitle && !this.noTitle && newTitle !== oldTitle) this.setAttribute('title', newTitle) + if (this.noTitle) { + this.removeAttribute('title') + } else if (newTitle && newTitle !== oldTitle) { + this.setAttribute('title', newTitle) + } } const duration = elapsedTime(date, this.precision, now) diff --git a/test/relative-time.js b/test/relative-time.js index 186a140..bea06d1 100644 --- a/test/relative-time.js +++ b/test/relative-time.js @@ -296,6 +296,38 @@ suite('relative-time', function () { assert.equal(el.getAttribute('title'), null) }) + test('removes the title when no-title is added after rendering', async () => { + const el = document.createElement('relative-time') + el.setAttribute('datetime', new Date().toISOString()) + await Promise.resolve() + assert.ok(el.getAttribute('title')) + el.setAttribute('no-title', '') + await Promise.resolve() + assert.equal(el.getAttribute('title'), null) + }) + + test('keeps a custom title when no-title is added', async () => { + const el = document.createElement('relative-time') + el.setAttribute('datetime', new Date().toISOString()) + el.setAttribute('title', 'custom') + await Promise.resolve() + el.setAttribute('no-title', '') + await Promise.resolve() + assert.equal(el.getAttribute('title'), 'custom') + }) + + test('sets the title again when no-title is removed', async () => { + const el = document.createElement('relative-time') + el.setAttribute('datetime', new Date().toISOString()) + await Promise.resolve() + const title = el.getAttribute('title') + el.setAttribute('no-title', '') + await Promise.resolve() + el.removeAttribute('no-title') + await Promise.resolve() + assert.equal(el.getAttribute('title'), title) + }) + test('shadowDOM reflects textContent with invalid date', async () => { const el = document.createElement('relative-time') el.textContent = 'A date string'