diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js
deleted file mode 100644
index 10820c1c1a0c..000000000000
--- a/src/elements/emby-radio/emby-radio.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import layoutManager from '../../components/layoutManager';
-import browser from '../../scripts/browser';
-import 'webcomponents.js/webcomponents-lite';
-import './emby-radio.scss';
-
-const EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
-
-function onKeyDown(e) {
-    // Don't submit form on enter
-    // Real (non-emulator) Tizen does nothing on Space
-    if (e.keyCode === 13 || (e.keyCode === 32 && browser.tizen)) {
-        e.preventDefault();
-
-        if (!this.checked) {
-            this.checked = true;
-
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true
-            }));
-        }
-
-        return false;
-    }
-}
-
-EmbyRadioPrototype.attachedCallback = function () {
-    const showFocus = !layoutManager.mobile;
-
-    if (this.getAttribute('data-radio') === 'true') {
-        return;
-    }
-
-    this.setAttribute('data-radio', 'true');
-
-    this.classList.add('mdl-radio__button');
-
-    const labelElement = this.parentNode;
-    labelElement.classList.add('mdl-radio');
-    labelElement.classList.add('mdl-js-radio');
-    labelElement.classList.add('mdl-js-ripple-effect');
-    if (showFocus) {
-        labelElement.classList.add('show-focus');
-    }
-
-    const labelTextElement = labelElement.querySelector('span');
-
-    labelTextElement.classList.add('radioButtonLabel');
-    labelTextElement.classList.add('mdl-radio__label');
-
-    let html = '';
-
-    html += '<div class="mdl-radio__circles">';
-
-    html += '<svg>';
-    html += '<defs>';
-    html += '<clipPath id="cutoff">';
-    html += '<circle cx="50%" cy="50%" r="50%" />';
-    html += '</clipPath>';
-    html += '</defs>';
-    html += '<circle class="mdl-radio__outer-circle" cx="50%" cy="50%" r="50%" fill="none" stroke="currentcolor" stroke-width="0.26em" clip-path="url(#cutoff)" />';
-    html += '<circle class="mdl-radio__inner-circle" cx="50%" cy="50%" r="25%" fill="currentcolor" />';
-    html += '</svg>';
-
-    if (showFocus) {
-        html += '<div class="mdl-radio__focus-circle"></div>';
-    }
-
-    html += '</div>';
-
-    this.insertAdjacentHTML('afterend', html);
-
-    this.addEventListener('keydown', onKeyDown);
-};
-
-document.registerElement('emby-radio', {
-    prototype: EmbyRadioPrototype,
-    extends: 'input'
-});
-
diff --git a/src/elements/emby-radio/emby-radio.ts b/src/elements/emby-radio/emby-radio.ts
new file mode 100644
index 000000000000..53b4b2f90a01
--- /dev/null
+++ b/src/elements/emby-radio/emby-radio.ts
@@ -0,0 +1,76 @@
+import layoutManager from '../../components/layoutManager';
+import browser from '../../scripts/browser';
+import './emby-radio.scss';
+
+export class EmbyRadio extends HTMLInputElement {
+    constructor() {
+        super();
+    }
+    onKeyDown(e: KeyboardEvent) {
+        // Don't submit form on enter
+        // Real (non-emulator) Tizen does nothing on Space
+        if (e.keyCode === 13 || (e.keyCode === 32 && browser.tizen)) {
+            e.preventDefault();
+
+            if (!this.checked) {
+                this.checked = true;
+
+                this.dispatchEvent(new CustomEvent('change', {
+                    bubbles: true
+                }));
+            }
+
+            return false;
+        }
+    }
+    connectedCallback() {
+        const showFocus = !layoutManager.mobile;
+
+        if (this.getAttribute('data-radio') === 'true') {
+            return;
+        }
+
+        this.setAttribute('data-radio', 'true');
+
+        this.classList.add('mdl-radio__button');
+
+        const labelElement = this.parentNode! as HTMLLabelElement;
+        labelElement.classList.add('mdl-radio');
+        labelElement.classList.add('mdl-js-radio');
+        labelElement.classList.add('mdl-js-ripple-effect');
+        if (showFocus) {
+            labelElement.classList.add('show-focus');
+        }
+
+        const labelTextElement = labelElement.querySelector('span')!
+
+        labelTextElement.classList.add('radioButtonLabel');
+        labelTextElement.classList.add('mdl-radio__label');
+
+        let html = '';
+
+        html += '<div class="mdl-radio__circles">';
+
+        html += '<svg>';
+        html += '<defs>';
+        html += '<clipPath id="cutoff">';
+        html += '<circle cx="50%" cy="50%" r="50%" />';
+        html += '</clipPath>';
+        html += '</defs>';
+        html += '<circle class="mdl-radio__outer-circle" cx="50%" cy="50%" r="50%" fill="none" stroke="currentcolor" stroke-width="0.26em" clip-path="url(#cutoff)" />';
+        html += '<circle class="mdl-radio__inner-circle" cx="50%" cy="50%" r="25%" fill="currentcolor" />';
+        html += '</svg>';
+
+        if (showFocus) {
+            html += '<div class="mdl-radio__focus-circle"></div>';
+        }
+
+        html += '</div>';
+
+        this.insertAdjacentHTML('afterend', html);
+
+        this.addEventListener('keydown', this.onKeyDown);
+    };
+}
+
+customElements.define('emby-radio', EmbyRadio, { extends: 'input' });