diff --git a/src/js/media-poster-image.js b/src/js/media-poster-image.js
index d868d2c2a..a0ca8e2a7 100644
--- a/src/js/media-poster-image.js
+++ b/src/js/media-poster-image.js
@@ -1,13 +1,14 @@
 import { window, document } from './utils/server-safe-globals.js';
+import { getStringAttr, setStringAttr } from './utils/element-utils.js';
 
 export const Attributes = {
   PLACEHOLDER_SRC: 'placeholdersrc',
   SRC: 'src',
-}
+};
 
 const template = document.createElement('template');
 
-template.innerHTML = /*html*/`
+template.innerHTML = /*html*/ `
   <style>
     :host {
       pointer-events: none;
@@ -33,10 +34,10 @@ template.innerHTML = /*html*/`
 
 const unsetBackgroundImage = (el) => {
   el.style.removeProperty('background-image');
-}
+};
 const setBackgroundImage = (el, image) => {
   el.style['background-image'] = `url('${image}')`;
-}
+};
 
 /**
  * @attr {string} placeholdersrc - Placeholder image source URL, often a blurhash data URL.
@@ -82,6 +83,28 @@ class MediaPosterImage extends window.HTMLElement {
       }
     }
   }
+
+  /**
+   * @type {string | undefined}
+   */
+  get placeholderSrc() {
+    return getStringAttr(this, Attributes.PLACEHOLDER_SRC);
+  }
+
+  set placeholderSrc(value) {
+    setStringAttr(this, Attributes.SRC, value);
+  }
+
+  /**
+   * @type {string | undefined}
+   */
+  get src() {
+    return getStringAttr(this, Attributes.SRC);
+  }
+
+  set src(value) {
+    setStringAttr(this, Attributes.SRC, value);
+  }
 }
 
 if (!window.customElements.get('media-poster-image')) {
diff --git a/src/js/media-preview-thumbnail.js b/src/js/media-preview-thumbnail.js
index 742e21940..8e240ccac 100644
--- a/src/js/media-preview-thumbnail.js
+++ b/src/js/media-preview-thumbnail.js
@@ -1,9 +1,16 @@
 import { window, document } from './utils/server-safe-globals.js';
-import { MediaUIAttributes, MediaStateReceiverAttributes } from './constants.js';
-import { getOrInsertCSSRule } from './utils/element-utils.js';
+import {
+  MediaUIAttributes,
+  MediaStateReceiverAttributes,
+} from './constants.js';
+import {
+  getOrInsertCSSRule,
+  getStringAttr,
+  setStringAttr,
+} from './utils/element-utils.js';
 
 const template = document.createElement('template');
-template.innerHTML = /*html*/`
+template.innerHTML = /*html*/ `
   <style>
     :host {
       box-sizing: border-box;
@@ -55,8 +62,9 @@ class MediaPreviewThumbnail extends window.HTMLElement {
       MediaStateReceiverAttributes.MEDIA_CONTROLLER
     );
     if (mediaControllerId) {
-      // @ts-ignore
-      this.#mediaController = this.getRootNode()?.getElementById(mediaControllerId);
+      this.#mediaController =
+        // @ts-ignore
+        this.getRootNode()?.getElementById(mediaControllerId);
       this.#mediaController?.associateElement?.(this);
     }
   }
@@ -89,19 +97,45 @@ class MediaPreviewThumbnail extends window.HTMLElement {
     }
   }
 
+  /**
+   * @type {string | undefined} The url of the preview image
+   */
+  get mediaPreviewImage() {
+    return getStringAttr(this, MediaUIAttributes.MEDIA_PREVIEW_IMAGE);
+  }
+
+  set mediaPreviewImage(value) {
+    setStringAttr(this, MediaUIAttributes.MEDIA_PREVIEW_IMAGE, value);
+  }
+
+  /**
+   * @type {Array<number> | undefined} Fixed length array [x, y, width, height] or undefined
+   */
+  get mediaPreviewCoords() {
+    const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_PREVIEW_COORDS);
+
+    if (!attrVal) return undefined;
+
+    return attrVal.split(/\s+/).map((coord) => +coord);
+  }
+
+  set mediaPreviewCoords(value) {
+    if (!value) {
+      this.removeAttribute(MediaUIAttributes.MEDIA_PREVIEW_COORDS);
+      return;
+    }
+
+    this.setAttribute(MediaUIAttributes.MEDIA_PREVIEW_COORDS, value.join(' '));
+  }
+
   update() {
-    const mediaPreviewCoordsStr = this.getAttribute(
-      MediaUIAttributes.MEDIA_PREVIEW_COORDS
-    );
-    const mediaPreviewImage = this.getAttribute(
-      MediaUIAttributes.MEDIA_PREVIEW_IMAGE
-    );
-    if (!(mediaPreviewCoordsStr && mediaPreviewImage)) return;
+    const coords = this.mediaPreviewCoords;
+    const previewImage = this.mediaPreviewImage;
+
+    if (!(coords && previewImage)) return;
 
-    const [x, y, w, h] = mediaPreviewCoordsStr
-      .split(/\s+/)
-      .map((coord) => +coord);
-    const src = mediaPreviewImage.split('#')[0];
+    const [x, y, w, h] = coords;
+    const src = previewImage.split('#')[0];
 
     const computedStyle = getComputedStyle(this);
     const { maxWidth, maxHeight, minWidth, minHeight } = computedStyle;
@@ -145,7 +179,10 @@ class MediaPreviewThumbnail extends window.HTMLElement {
 }
 
 if (!window.customElements.get('media-preview-thumbnail')) {
-  window.customElements.define('media-preview-thumbnail', MediaPreviewThumbnail);
+  window.customElements.define(
+    'media-preview-thumbnail',
+    MediaPreviewThumbnail
+  );
 }
 
 export default MediaPreviewThumbnail;
diff --git a/src/js/media-preview-time-display.js b/src/js/media-preview-time-display.js
index 48e0d6b95..b582a14dd 100644
--- a/src/js/media-preview-time-display.js
+++ b/src/js/media-preview-time-display.js
@@ -2,6 +2,7 @@ import MediaTextDisplay from './media-text-display.js';
 import { window } from './utils/server-safe-globals.js';
 import { formatTime } from './utils/time.js';
 import { MediaUIAttributes } from './constants.js';
+import { getNumericAttr, setNumericAttr } from './utils/element-utils.js';
 // Todo: Use data locals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
 
 /**
@@ -10,6 +11,7 @@ import { MediaUIAttributes } from './constants.js';
  * @cssproperty [--media-preview-time-display-display = inline-flex] - `display` property of display.
  */
 class MediaPreviewTimeDisplay extends MediaTextDisplay {
+  /** @type {HTMLSlotElement} */
   #slot;
 
   static get observedAttributes() {
@@ -28,10 +30,24 @@ class MediaPreviewTimeDisplay extends MediaTextDisplay {
     }
     super.attributeChangedCallback(attrName, oldValue, newValue);
   }
+
+  /**
+   * @type {number | undefined} Timeline preview time
+   */
+  get mediaPreviewTime() {
+    return getNumericAttr(this, MediaUIAttributes.MEDIA_PREVIEW_TIME);
+  }
+
+  set mediaPreviewTime(value) {
+    setNumericAttr(this, MediaUIAttributes.MEDIA_PREVIEW_TIME, value);
+  }
 }
 
 if (!window.customElements.get('media-preview-time-display')) {
-  window.customElements.define('media-preview-time-display', MediaPreviewTimeDisplay);
+  window.customElements.define(
+    'media-preview-time-display',
+    MediaPreviewTimeDisplay
+  );
 }
 
 export default MediaPreviewTimeDisplay;