diff --git a/calendar/base/content/dialogs/calendar-subscriptions-dialog.css b/calendar/base/content/dialogs/calendar-subscriptions-dialog.css
index 958e97a5b8..619a9cf5d9 100644
--- a/calendar/base/content/dialogs/calendar-subscriptions-dialog.css
+++ b/calendar/base/content/dialogs/calendar-subscriptions-dialog.css
@@ -2,7 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-calendar-subscriptions-richlistitem {
-  -moz-binding: url("chrome://calendar/content/calendar-subscriptions-list.xml#calendar-subscriptions-richlistitem");
+richlistitem[is="calendar-subscriptions-richlistitem"] {
   -moz-user-focus: normal;
 }
diff --git a/calendar/base/content/dialogs/calendar-subscriptions-dialog.js b/calendar/base/content/dialogs/calendar-subscriptions-dialog.js
index 81c54bf70a..986a62d1ed 100644
--- a/calendar/base/content/dialogs/calendar-subscriptions-dialog.js
+++ b/calendar/base/content/dialogs/calendar-subscriptions-dialog.js
@@ -103,7 +103,8 @@ function onSearch() {
         onResult: function(operation, result) {
             if (result) {
                 for (let calendar of result) {
-                    let newNode = document.createXULElement("calendar-subscriptions-richlistitem");
+                    let newNode = document.createXULElement("richlistitem",
+                        { is: "calendar-subscriptions-richlistitem" });
                     newNode.calendar = calendar;
                     newNode.subscribed = registeredCals[calendar.id];
                     richListBox.appendChild(newNode);
diff --git a/calendar/base/content/dialogs/calendar-subscriptions-dialog.xul b/calendar/base/content/dialogs/calendar-subscriptions-dialog.xul
index afb26b746a..5c45c88bbd 100644
--- a/calendar/base/content/dialogs/calendar-subscriptions-dialog.xul
+++ b/calendar/base/content/dialogs/calendar-subscriptions-dialog.xul
@@ -27,6 +27,7 @@
   <!-- Javascript includes -->
   <script src="chrome://calendar/content/calendar-subscriptions-dialog.js"/>
   <script src="chrome://calendar/content/calendar-ui-utils.js"/>
+  <script src="chrome://calendar/content/calendar-subscriptions-list.js"/>
 
   <vbox flex="1">
     <grid flex="1">
diff --git a/calendar/base/content/widgets/calendar-subscriptions-list.js b/calendar/base/content/widgets/calendar-subscriptions-list.js
new file mode 100644
index 0000000000..ede1214623
--- /dev/null
+++ b/calendar/base/content/widgets/calendar-subscriptions-list.js
@@ -0,0 +1,96 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+  * License, v. 2.0. If a copy of the MPL was not distributed with this
+  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/* global MozXULElement, MozElements */
+
+// This is loaded into all XUL windows. Wrap in a block to prevent
+// leaking to window scope.
+{
+    /**
+     * The MozCalendarSubscriptionsRichlistitem widget is used to display the
+     * calendar details: i.e. checkbox and label as a richlistitem in the calendar
+     * subscriptions richlistbox.
+     *
+     * @extends {MozElements.MozRichlistitem}
+     */
+    class MozCalendarSubscriptionsRichlistitem extends MozElements.MozRichlistitem {
+        connectedCallback() {
+            if (this.delayConnectedCallback() || this.hasChildNodes()) {
+                return;
+            }
+
+            this.setAttribute("is", "calendar-subscriptions-richlistitem");
+
+            this.appendChild(MozXULElement.parseXULToFragment(`
+                <hbox flex="1" align="center">
+                    <checkbox class="calendar-subscriptions-richlistitem-checkbox"></checkbox>
+                    <label class="subscription-name" flex="1" crop="end"></label>
+                </hbox>
+            `));
+
+            this.mCalendar = null;
+            this.mSubscribed = false;
+        }
+
+        set calendar(val) {
+            this.setCalendar(val);
+            return val;
+        }
+
+        get calendar() {
+            return this.mCalendar;
+        }
+
+        set subscribed(val) {
+            this.mSubscribed = val;
+            this.checked = val;
+            return val;
+        }
+
+        get subscribed() {
+            return this.mSubscribed;
+        }
+
+        set checked(val) {
+            let checkbox = this.querySelector(".calendar-subscriptions-richlistitem-checkbox");
+            if (val) {
+                checkbox.setAttribute("checked", "true");
+            } else {
+                checkbox.removeAttribute("checked");
+            }
+            return val;
+        }
+
+        get checked() {
+            let checkbox = this.querySelector(".calendar-subscriptions-richlistitem-checkbox");
+            return checkbox.getAttribute("disabled") == "true";
+        }
+
+        set disabled(val) {
+            let checkbox = this.querySelector(".calendar-subscriptions-richlistitem-checkbox");
+            if (val) {
+                checkbox.setAttribute("disabled", "true");
+            } else {
+                checkbox.removeAttribute("disabled");
+            }
+            return val;
+        }
+
+        get disabled() {
+            let checkbox = this.querySelector(".calendar-subscriptions-richlistitem-checkbox");
+            return checkbox.getAttribute("disabled") == "true";
+        }
+
+        setCalendar(aCalendar) {
+            this.mCalendar = aCalendar;
+            let label = this.querySelector(".subscription-name");
+            label.setAttribute("value", aCalendar.name);
+        }
+    }
+
+    customElements.define("calendar-subscriptions-richlistitem", MozCalendarSubscriptionsRichlistitem,
+        { extends: "richlistitem" });
+}
diff --git a/calendar/base/content/widgets/calendar-subscriptions-list.xml b/calendar/base/content/widgets/calendar-subscriptions-list.xml
deleted file mode 100644
index a252f4ba75..0000000000
--- a/calendar/base/content/widgets/calendar-subscriptions-list.xml
+++ /dev/null
@@ -1,102 +0,0 @@
-<?xml version="1.0"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
--->
-
-<bindings id="calendar-subscriptions-list-bindings"
-          xmlns="http://www.mozilla.org/xbl"
-          xmlns:html="http://www.w3.org/1999/xhtml"
-          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-          xmlns:xbl="http://www.mozilla.org/xbl">
-
-  <binding id="calendar-subscriptions-richlistitem"
-           extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
-    <content>
-      <xul:hbox flex="1">
-        <xul:checkbox anonid="subscription-checkbox" class="calendar-subscriptions-richlistitem-checkbox"/>
-        <xul:label anonid="subscription-name" flex="1" crop="end"/>
-      </xul:hbox>
-    </content>
-
-    <implementation>
-      <field name="mCalendar">null</field>
-      <field name="mSubscribed">false</field>
-
-      <property name="calendar">
-        <getter><![CDATA[
-            return this.mCalendar;
-        ]]></getter>
-        <setter><![CDATA[
-            this.setCalendar(val);
-            return val;
-        ]]></setter>
-      </property>
-
-      <property name="subscribed">
-        <getter><![CDATA[
-            return this.mSubscribed;
-        ]]></getter>
-        <setter><![CDATA[
-            this.mSubscribed = val;
-            this.checked = val;
-            return val;
-        ]]></setter>
-      </property>
-
-      <property name="checked">
-        <getter><![CDATA[
-            let checkbox = document.getAnonymousElementByAttribute(
-              this, "anonid", "subscription-checkbox");
-            if (checkbox.getAttribute("checked") == "true") {
-                return true;
-            } else {
-                return false;
-            }
-        ]]></getter>
-        <setter><![CDATA[
-            let checkbox = document.getAnonymousElementByAttribute(
-              this, "anonid", "subscription-checkbox");
-            if (val) {
-                checkbox.setAttribute("checked", "true");
-            } else {
-                checkbox.removeAttribute("checked");
-            }
-            return val;
-        ]]></setter>
-      </property>
-
-      <property name="disabled">
-        <getter><![CDATA[
-            let checkbox = document.getAnonymousElementByAttribute(
-              this, "anonid", "subscription-checkbox");
-            if (checkbox.getAttribute("disabled") == "true") {
-                return true;
-            } else {
-                return false;
-            }
-        ]]></getter>
-        <setter><![CDATA[
-            let checkbox = document.getAnonymousElementByAttribute(
-              this, "anonid", "subscription-checkbox");
-            if (val) {
-                checkbox.setAttribute("disabled", "true");
-            } else {
-                checkbox.removeAttribute("disabled");
-            }
-            return val;
-        ]]></setter>
-      </property>
-
-      <method name="setCalendar">
-        <parameter name="aCalendar"/>
-        <body><![CDATA[
-            this.mCalendar = aCalendar;
-            let label = document.getAnonymousElementByAttribute(
-                this, "anonid", "subscription-name");
-            label.setAttribute("value", aCalendar.name);
-        ]]></body>
-      </method>
-    </implementation>
-  </binding>
-</bindings>
diff --git a/calendar/base/jar.mn b/calendar/base/jar.mn
index d7c8747451..ceb58bb5f9 100644
--- a/calendar/base/jar.mn
+++ b/calendar/base/jar.mn
@@ -95,7 +95,7 @@ calendar.jar:
     content/calendar/widgets/calendar-alarm-widget.js      (content/widgets/calendar-alarm-widget.js)
     content/calendar/widgets/calendar-widgets.xml          (content/widgets/calendar-widgets.xml)
     content/calendar/widgets/calendar-list-tree.js         (content/widgets/calendar-list-tree.js)
-    content/calendar/calendar-subscriptions-list.xml       (content/widgets/calendar-subscriptions-list.xml)
+    content/calendar/calendar-subscriptions-list.js        (content/widgets/calendar-subscriptions-list.js)
     content/calendar/widgets/calendar-widget-bindings.css  (content/widgets/calendar-widget-bindings.css)
     content/calendar/calApplicationUtils.js                (src/calApplicationUtils.js)
     content/calendar/calFilter.js                          (src/calFilter.js)
diff --git a/calendar/base/themes/common/dialogs/calendar-subscriptions-dialog.css b/calendar/base/themes/common/dialogs/calendar-subscriptions-dialog.css
index 978f665f84..13fc1a9dfd 100644
--- a/calendar/base/themes/common/dialogs/calendar-subscriptions-dialog.css
+++ b/calendar/base/themes/common/dialogs/calendar-subscriptions-dialog.css
@@ -23,7 +23,7 @@
   flex-direction: column;
 }
 
-calendar-subscriptions-richlistitem[selected="true"] {
+richlistitem[is="calendar-subscriptions-richlistitem"][selected="true"] {
   background-color: Highlight;
   color: HighlightText;
 }