diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
index 80dc977..bb8545f 100644
--- a/src/relative-time-element.ts
+++ b/src/relative-time-element.ts
@@ -198,6 +198,8 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       month: this.month,
       year: this.year,
       timeZoneName: this.timeZoneName,
+      dateStyle: this.dateStyle,
+      timeStyle: this.timeStyle,
     })
     return `${this.prefix} ${formatter.format(date)}`.trim()
   }
@@ -326,6 +328,30 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     this.setAttribute('time-zone-name', value || '')
   }
 
+  get dateStyle() {
+    const dateStyle = this.getAttribute('date-style')
+
+    if (dateStyle === 'short' || dateStyle === 'long' || dateStyle === 'full' || dateStyle === 'medium') {
+      return dateStyle
+    }
+  }
+
+  set dateStyle(value: 'short' | 'long' | 'full' | 'medium' | undefined) {
+    this.setAttribute('date-style', value ?? '')
+  }
+
+  get timeStyle() {
+    const timeStyle = this.getAttribute('time-style')
+
+    if (timeStyle === 'short' || timeStyle === 'long' || timeStyle === 'full' || timeStyle === 'medium') {
+      return timeStyle
+    }
+  }
+
+  set timeStyle(value: 'short' | 'long' | 'full' | 'medium' | undefined) {
+    this.setAttribute('time-style', value ?? '')
+  }
+
   /** @deprecated */
   get prefix(): string {
     return this.getAttribute('prefix') ?? (this.format === 'datetime' ? '' : 'on')