add shadowRoot and fallback text

Author: silverwind

modules/timeutil/datetime.go

@@ -57,7 +57,7 @@ func DateTime(format string, datetime any, extraAttrs ...string) template.HTML {
 	switch format {
 	case "short", "long": // date only, render using <gitea-locale-date>
 		attrs = append(attrs, `month="`+format+`"`, `day="numeric"`)
-		return template.HTML(fmt.Sprintf(`<gitea-locale-date %s date="%s"></gitea-locale-date>`, strings.Join(attrs, " "), datetimeEscaped))
+		return template.HTML(fmt.Sprintf(`<gitea-locale-date %s date="%s">%s</gitea-locale-date>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped))
 	case "full": // full date including time
 		attrs = append(attrs, `format="datetime"`, `month="short"`, `day="numeric"`, `hour="numeric"`, `minute="numeric"`, `second="numeric"`)
 		return template.HTML(fmt.Sprintf(`<relative-time %s datetime="%s">%s</relative-time>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped))

web_src/js/webcomponents/GiteaLocaleDate.js

@@ -16,7 +16,8 @@ window.customElements.define('gitea-locale-date', class extends HTMLElement {
     // Ref: https://stackoverflow.com/a/14569783/808699
     const correctedDate = new Date(date.getTime() - date.getTimezoneOffset() * -60000);
 
-    this.textContent = correctedDate.toLocaleString(lang ?? [], {
+    if (!this.shadowRoot) this.attachShadow({mode: 'open'});
+    this.shadowRoot.textContent = correctedDate.toLocaleString(lang ?? [], {
       ...(year && {year}),
       ...(month && {month}),
       ...(weekday && {weekday}),