diff --git a/extensions/amp-date-countdown/1.0/base-element.js b/extensions/amp-date-countdown/1.0/base-element.js
index d55780feef01..3e052d5e2564 100644
--- a/extensions/amp-date-countdown/1.0/base-element.js
+++ b/extensions/amp-date-countdown/1.0/base-element.js
@@ -4,6 +4,8 @@ import {PreactBaseElement} from '#preact/base-element';
 
 import {BentoDateCountdown} from './component';
 
+export const TAG = 'bento-date-countdown';
+
 export class BaseElement extends PreactBaseElement {}
 
 /** @override */
diff --git a/extensions/amp-date-countdown/1.0/bento-date-countdown.js b/extensions/amp-date-countdown/1.0/bento-date-countdown.js
new file mode 100644
index 000000000000..fe1b4b82d9d4
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/bento-date-countdown.js
@@ -0,0 +1,3 @@
+import {defineElement} from './web-component';
+
+defineElement();
diff --git a/extensions/amp-date-countdown/1.0/web-component.js b/extensions/amp-date-countdown/1.0/web-component.js
new file mode 100644
index 000000000000..362d1e51a4bc
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/web-component.js
@@ -0,0 +1,31 @@
+import mustache from '#bento/components/bento-mustache/1.0/bento-mustache';
+import {getTemplate} from '#bento/util/template';
+
+import {defineBentoElement} from '#preact/bento-ce';
+
+import {BaseElement, TAG} from './base-element';
+
+export class BentoDateCountdown extends BaseElement {
+  /** @override */
+  checkPropsPostMutations() {
+    const template = getTemplate(this.element);
+    if (!template) {
+      // show error?
+      return;
+    }
+
+    this.mutateProps({
+      'render': (data) => {
+        const html = mustache.render(template./*OK*/ innerHTML, data);
+        return {'__html': html};
+      },
+    });
+  }
+}
+
+/**
+ * Registers `<bento-date-countdown>` component to CustomElements registry
+ */
+export function defineElement() {
+  defineBentoElement(TAG, BentoDateCountdown);
+}
diff --git a/extensions/amp-date-display/1.0/base-element.js b/extensions/amp-date-display/1.0/base-element.js
index 97f779f5836c..664fd1ec49f1 100644
--- a/extensions/amp-date-display/1.0/base-element.js
+++ b/extensions/amp-date-display/1.0/base-element.js
@@ -5,6 +5,8 @@ import {createParseAttrsWithPrefix} from '#preact/parse-props';
 
 import {BentoDateDisplay} from './component';
 
+export const TAG = 'bento-date-display';
+
 export class BaseElement extends PreactBaseElement {}
 
 /** @override */
diff --git a/extensions/amp-date-display/1.0/bento-date-display.js b/extensions/amp-date-display/1.0/bento-date-display.js
new file mode 100644
index 000000000000..fe1b4b82d9d4
--- /dev/null
+++ b/extensions/amp-date-display/1.0/bento-date-display.js
@@ -0,0 +1,3 @@
+import {defineElement} from './web-component';
+
+defineElement();
diff --git a/extensions/amp-date-display/1.0/web-component.js b/extensions/amp-date-display/1.0/web-component.js
new file mode 100644
index 000000000000..ffd91ecf37a4
--- /dev/null
+++ b/extensions/amp-date-display/1.0/web-component.js
@@ -0,0 +1,31 @@
+import mustache from '#bento/components/bento-mustache/1.0/bento-mustache';
+import {getTemplate} from '#bento/util/template';
+
+import {defineBentoElement} from '#preact/bento-ce';
+
+import {BaseElement, TAG} from './base-element';
+
+export class BentoDateDisplay extends BaseElement {
+  /** @override */
+  checkPropsPostMutations() {
+    const template = getTemplate(this.element);
+    if (!template) {
+      // show error?
+      return;
+    }
+
+    this.mutateProps({
+      'render': (data) => {
+        const html = mustache.render(template./*OK*/ innerHTML, data);
+        return {'__html': html};
+      },
+    });
+  }
+}
+
+/**
+ * Registers `<bento-date-display>` component to CustomElements registry
+ */
+export function defineElement() {
+  defineBentoElement(TAG, BentoDateDisplay);
+}
diff --git a/src/bento/components/bento-mustache/1.0/bento-mustache.js b/src/bento/components/bento-mustache/1.0/bento-mustache.js
new file mode 100644
index 000000000000..3b563fd59532
--- /dev/null
+++ b/src/bento/components/bento-mustache/1.0/bento-mustache.js
@@ -0,0 +1,5 @@
+// Bento components must import `bento-mustache.js` instead of `mustache` directly.
+// This is so that the bundler links it to the external `bento-mustache.js` binary.
+import mustache from '#third_party/mustache/mustache';
+
+export default mustache;
diff --git a/src/bento/util/template.js b/src/bento/util/template.js
new file mode 100644
index 000000000000..acc49833c477
--- /dev/null
+++ b/src/bento/util/template.js
@@ -0,0 +1,18 @@
+import {escapeCssSelectorIdent} from '#core/dom/css-selectors';
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @return {HTMLTemplateElement|null}
+ */
+export function getTemplate(element, attribute = 'template') {
+  if (element.hasAttribute(attribute)) {
+    const id = element.getAttribute(attribute);
+    return Boolean(id)
+      ? element.ownerDocument.querySelector(
+          `template#${escapeCssSelectorIdent(id)}`
+        )
+      : null;
+  }
+  return element.querySelector('template');
+}