diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.js b/src/panels/lovelace/components/notifications/hui-notification-item-template.js
deleted file mode 100644
index a7b091849a..0000000000
--- a/src/panels/lovelace/components/notifications/hui-notification-item-template.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-icon-button/paper-icon-button";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../../components/ha-card";
-
-export class HuiNotificationItemTemplate extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        .contents {
-          padding: 16px;
-        }
-
-        ha-card .header {
-          @apply --paper-font-headline;
-          color: var(--primary-text-color);
-          padding: 16px 16px 0;
-        }
-
-        .actions {
-          border-top: 1px solid #e8e8e8;
-          padding: 5px 16px;
-        }
-
-        ::slotted(.primary) {
-          color: var(--primary-color);
-        }
-      </style>
-      <ha-card>
-        <div class="header"><slot name="header"></slot></div>
-        <div class="contents"><slot></slot></div>
-        <div class="actions"><slot name="actions"></slot></div>
-      </ha-card>
-    `;
-  }
-}
-customElements.define(
-  "hui-notification-item-template",
-  HuiNotificationItemTemplate
-);
diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.ts b/src/panels/lovelace/components/notifications/hui-notification-item-template.ts
new file mode 100644
index 0000000000..5aa26648b7
--- /dev/null
+++ b/src/panels/lovelace/components/notifications/hui-notification-item-template.ts
@@ -0,0 +1,61 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  css,
+  CSSResult,
+} from "lit-element";
+
+import "../../../../components/ha-card";
+
+@customElement("hui-notification-item-template")
+export class HuiNotificationItemTemplate extends LitElement {
+  protected render(): TemplateResult | void {
+    return html`
+      <ha-card>
+        <div class="header"><slot name="header"></slot></div>
+        <div class="contents"><slot></slot></div>
+        <div class="actions"><slot name="actions"></slot></div>
+      </ha-card>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .contents {
+        padding: 16px;
+      }
+
+      ha-card .header {
+        /* start paper-font-headline style */
+        font-family: "Roboto", "Noto", sans-serif;
+        -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
+        text-rendering: optimizeLegibility;
+        font-size: 24px;
+        font-weight: 400;
+        letter-spacing: -0.012em;
+        line-height: 32px;
+        /* end paper-font-headline style */
+
+        color: var(--primary-text-color);
+        padding: 16px 16px 0;
+      }
+
+      .actions {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+      }
+
+      ::slotted(.primary) {
+        color: var(--primary-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-notification-item-template": HuiNotificationItemTemplate;
+  }
+}