From c26ece32ba001afd80f115aae5652110dd40b385 Mon Sep 17 00:00:00 2001
From: Dima Voytenko <dvoytenko@google.com>
Date: Wed, 16 Sep 2020 13:22:43 -0700
Subject: [PATCH] amp-date-display: render via __html string (#30226)

* amp-date-display: render via __html string

* cleanup defaults

* cleanup RendererFunctionResponseType

* tests

* more tests

* amp-date-display has to use div

* fixed tests
---
 build-system/externs/preact.extern.js         |   5 +
 examples/amp-date-display.amp.html            |  26 +-
 .../amp-date-display/1.0/amp-date-display.js  | 102 ++++---
 .../amp-date-display/1.0/async-render.js      |  36 ---
 .../amp-date-display/1.0/date-display.js      |  71 ++++-
 .../amp-date-display/1.0/date-display.type.js |  25 +-
 .../amp-date-display/1.0/render-dom-tree.js   |  46 ---
 .../1.0/storybook/Basic.amp.js                |  69 ++++-
 .../amp-date-display/1.0/storybook/Basic.js   |  30 +-
 .../1.0/test/test-amp-date-display.js         |  51 ++--
 .../1.0/test/test-date-display.js             |  48 +++
 extensions/amp-mustache/0.1/amp-mustache.js   |  19 +-
 .../0.1/test/test-amp-mustache.js             | 166 ++++++-----
 extensions/amp-mustache/0.2/amp-mustache.js   |  20 +-
 .../0.2/test/test-amp-mustache.js             | 164 +++++-----
 src/preact/base-element.js                    | 164 ++++++++--
 src/preact/component/component.type.js        |  10 +
 src/preact/component/index.js                 |   1 +
 src/preact/component/renderer.js              |  51 ++++
 src/service/template-impl.js                  |  64 ++--
 test/unit/preact/component/test-renderer.js   | 125 ++++++++
 test/unit/preact/test-base-element.js         | 279 ++++++++++++------
 test/unit/test-template.js                    |  25 +-
 23 files changed, 1107 insertions(+), 490 deletions(-)
 delete mode 100644 extensions/amp-date-display/1.0/async-render.js
 delete mode 100644 extensions/amp-date-display/1.0/render-dom-tree.js
 create mode 100644 src/preact/component/renderer.js
 create mode 100644 test/unit/preact/component/test-renderer.js

diff --git a/build-system/externs/preact.extern.js b/build-system/externs/preact.extern.js
index ee1a43e7e1bf..1a435e13777e 100644
--- a/build-system/externs/preact.extern.js
+++ b/build-system/externs/preact.extern.js
@@ -55,3 +55,8 @@ PreactDef.SimpleRenderable;
  * @typedef {PreactDef.SimpleRenderable|!PreactDef.VNode|!Array<PreactDef.SimpleRenderable|!PreactDef.VNode|!Array<PreactDef.SimpleRenderable|!PreactDef.VNode>>}
  */
 PreactDef.Renderable;
+
+/**
+ * @typedef {{__html: ?string}}
+ */
+PreactDef.InnerHTML;
diff --git a/examples/amp-date-display.amp.html b/examples/amp-date-display.amp.html
index ac6f38b990f8..adf9a0fc6c4c 100644
--- a/examples/amp-date-display.amp.html
+++ b/examples/amp-date-display.amp.html
@@ -27,7 +27,7 @@ <h1>Date & time</h1>
     <h2>Available variables</h2>
     <amp-date-display datetime="2017-08-02T20:05:05.000Z" display-in="utc" layout="fixed" width="360" height="140" >
       <template type="amp-mustache">
-        <div>iso: {{iso}}</div>
+        <div>iso: <time datetime="{{iso}}">{{iso}}</time></div>
         <div>day: {{day}} {{dayTwoDigit}} {{dayName}} {{dayNameShort}}</div>
         <div>month: {{month}} {{monthTwoDigit}} {{monthName}} {{monthNameShort}}</div>
         <div>year: {{year}} {{yearTwoDigit}}</div>
@@ -40,68 +40,68 @@ <h2>Available variables</h2>
     <h2>UTC vs local</h2>
     <amp-date-display datetime="2017-08-02T15:05:05.000Z" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>UTC in local: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}</div>
+        UTC in local: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="2017-08-02T15:05:05.000Z" display-in="utc" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>UTC in UTC: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}</div>
+        UTC in UTC: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="2017-08-02T15:05:05.000" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>local in local: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}</div>
+        local in local: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="2017-08-02T15:05:05.000" display-in="utc" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>local in UTC: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}</div>
+        local in UTC: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
       </template>
     </amp-date-display>
 
     <h2>Now & offset</h2>
     <amp-date-display datetime="now" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>now: {{iso}}</div>
+        now: {{iso}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="now" offset-seconds="-3600" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>now - 1h: {{iso}}</div>
+        now - 1h: {{iso}}
       </template>
     </amp-date-display>
 
     <h2>Timestamps</h2>
     <amp-date-display timestamp-seconds="1501686305" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>from seconds: {{iso}}</div>
+        from seconds: {{iso}}
       </template>
     </amp-date-display>
     <amp-date-display timestamp-ms="1501686305000" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>from ms: {{iso}}</div>
+        from ms: {{iso}}
       </template>
     </amp-date-display>
 
     <h2>Locales</h2>
     <amp-date-display datetime="now" locale="de" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>de: {{dayName}} {{day}} {{monthName}} {{year}}</div>
+        de: {{dayName}} {{day}} {{monthName}} {{year}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="now" locale="fr" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>fr: {{dayName}} {{day}} {{monthName}} {{year}}</div>
+        fr: {{dayName}} {{day}} {{monthName}} {{year}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="now" locale="cs" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>cs: {{dayName}} {{day}} {{monthName}} {{year}}</div>
+        cs: {{dayName}} {{day}} {{monthName}} {{year}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="now" locale="en-GB" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>en-GB: {{dayName}} {{day}} {{monthName}} {{year}}</div>
+        en-GB: {{dayName}} {{day}} {{monthName}} {{year}}
       </template>
     </amp-date-display>
   </div>
diff --git a/extensions/amp-date-display/1.0/amp-date-display.js b/extensions/amp-date-display/1.0/amp-date-display.js
index 326272a17d9a..e57866684d6f 100644
--- a/extensions/amp-date-display/1.0/amp-date-display.js
+++ b/extensions/amp-date-display/1.0/amp-date-display.js
@@ -14,59 +14,28 @@
  * limitations under the License.
  */
 
-import * as Preact from '../../../src/preact';
-import {AsyncRender} from './async-render';
 import {DateDisplay} from './date-display';
 import {PreactBaseElement} from '../../../src/preact/base-element';
-import {RenderDomTree} from './render-dom-tree';
 import {Services} from '../../../src/services';
+import {dev, userAssert} from '../../../src/log';
 import {dict} from '../../../src/utils/object';
 import {isExperimentOn} from '../../../src/experiments';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {parseDate} from '../../../src/utils/date';
-import {userAssert} from '../../../src/log';
 
 /** @const {string} */
 const TAG = 'amp-date-display';
 
 class AmpDateDisplay extends PreactBaseElement {
-  /** @override */
-  init() {
-    const templates = Services.templatesFor(this.win);
-    let rendered = false;
-
-    return dict({
-      /**
-       * @param {!JsonObject} data
-       * @param {*} children
-       * @return {*}
-       */
-      'render': (data, children) => {
-        // We only render once in AMP mode, but React mode may rerender
-        // serveral times.
-        if (rendered) {
-          return children;
-        }
-        rendered = true;
-
-        const host = this.element;
-        const domPromise = templates
-          .findAndRenderTemplate(host, data)
-          .then((rendered) => {
-            const container = document.createElement('div');
-            container.appendChild(rendered);
-
-            return <RenderDomTree dom={container} host={host} />;
-          });
-
-        return (
-          <>
-            {children}
-            <AsyncRender>{domPromise}</AsyncRender>
-          </>
-        );
-      },
-    });
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?../../../src/service/template-impl.Templates} */
+    this.templates_ = null;
+
+    /** @private {?Element} */
+    this.template_ = null;
   }
 
   /** @override */
@@ -77,14 +46,50 @@ class AmpDateDisplay extends PreactBaseElement {
     );
     return isLayoutSizeDefined(layout);
   }
+
+  /** @override */
+  checkPropsPostMutations() {
+    const templates =
+      this.templates_ || (this.templates_ = Services.templatesFor(this.win));
+    const template = templates.maybeFindTemplate(this.element);
+    if (template != this.template_) {
+      this.template_ = template;
+      if (template) {
+        // Only overwrite `render` when template is ready to minimize FOUC.
+        templates.whenReady(template).then(() => {
+          if (template != this.template_) {
+            // A new template has been set while the old one was initializing.
+            return;
+          }
+          this.mutateProps(
+            dict({
+              'render': (data) => {
+                return templates
+                  .renderTemplateAsString(dev().assertElement(template), data)
+                  .then((html) => dict({'__html': html}));
+              },
+            })
+          );
+        });
+      } else {
+        this.mutateProps(dict({'render': null}));
+      }
+    }
+  }
+
+  /** @override */
+  isReady(props) {
+    if (this.template_ && !('render' in props)) {
+      // The template is specified, but not available yet.
+      return false;
+    }
+    return true;
+  }
 }
 
 /** @override */
 AmpDateDisplay['Component'] = DateDisplay;
 
-/** @override */
-AmpDateDisplay['passthrough'] = true;
-
 /** @override */
 AmpDateDisplay['props'] = {
   'datetime': {
@@ -95,6 +100,15 @@ AmpDateDisplay['props'] = {
   'locale': {attr: 'locale'},
 };
 
+/** @override */
+AmpDateDisplay['layoutSizeDefined'] = true;
+
+/** @override */
+AmpDateDisplay['lightDomTag'] = 'div';
+
+/** @override */
+AmpDateDisplay['usesTemplate'] = true;
+
 /**
  * @param {!Element} element
  * @return {?number}
diff --git a/extensions/amp-date-display/1.0/async-render.js b/extensions/amp-date-display/1.0/async-render.js
deleted file mode 100644
index 811646191b45..000000000000
--- a/extensions/amp-date-display/1.0/async-render.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS-IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {useResourcesNotify} from '../../../src/preact/utils';
-import {useState} from '../../../src/preact';
-
-/**
- * Renders the children prop, waiting for it to resolve if it is a promise.
- *
- * @param {!DateDisplayDef.AsyncRenderProps} props
- * @return {PreactDef.Renderable}
- */
-export function AsyncRender({children}) {
-  const [state, set] = useState(children);
-  useResourcesNotify();
-
-  if (state && state.then) {
-    Promise.resolve(children).then(set);
-    return null;
-  }
-
-  return state;
-}
diff --git a/extensions/amp-date-display/1.0/date-display.js b/extensions/amp-date-display/1.0/date-display.js
index a132bce69d55..7a84739e31b6 100644
--- a/extensions/amp-date-display/1.0/date-display.js
+++ b/extensions/amp-date-display/1.0/date-display.js
@@ -14,12 +14,39 @@
  * limitations under the License.
  */
 
+import * as Preact from '../../../src/preact';
+import {Wrapper, useRenderer} from '../../../src/preact/component';
 import {getDate} from '../../../src/utils/date';
+import {useMemo} from '../../../src/preact';
 import {useResourcesNotify} from '../../../src/preact/utils';
 
+/** @const {string} */
+const DEFAULT_DISPLAY_IN = 'local';
+
 /** @const {string} */
 const DEFAULT_LOCALE = 'en';
 
+/** @const {!Object<string, *>} */
+const DEFAULT_DATETIME_OPTIONS = {
+  'year': 'numeric',
+  'month': 'short',
+  'day': 'numeric',
+  'hour': 'numeric',
+  'minute': 'numeric',
+};
+
+/** @const {!Object<string, *>} */
+const DEFAULT_DATETIME_OPTIONS_UTC = {
+  ...DEFAULT_DATETIME_OPTIONS,
+  timeZone: 'UTC',
+};
+
+/**
+ * @param {!JsonObject} data
+ * @return {string}
+ */
+const DEFAULT_RENDER = (data) => /** @type {string} */ (data['localeString']);
+
 /** @typedef {{
   year: number,
   month: number,
@@ -32,6 +59,7 @@ const DEFAULT_LOCALE = 'en';
   minute: number,
   second: number,
   iso: string,
+  localeString: string,
 }} */
 let VariablesV2Def;
 
@@ -63,23 +91,44 @@ let EnhancedVariablesV2Def;
  * @param {!DateDisplayDef.Props} props
  * @return {PreactDef.Renderable}
  */
-export function DateDisplay(props) {
-  const {datetime, render, children} = props;
-  const date = new Date(getDate(datetime));
-  const data = /** @type {!JsonObject} */ (getDataForTemplate(date, props));
+export function DateDisplay({
+  datetime,
+  displayIn = DEFAULT_DISPLAY_IN,
+  locale = DEFAULT_LOCALE,
+  render = DEFAULT_RENDER,
+  ...rest
+}) {
+  const date = getDate(datetime);
+  const data = useMemo(
+    () => getDataForTemplate(new Date(date), displayIn, locale),
+    [date, displayIn, locale]
+  );
+
+  const rendered = useRenderer(render, data);
+  const isHtml =
+    rendered && typeof rendered == 'object' && '__html' in rendered;
+
   useResourcesNotify();
 
-  return render(data, children);
+  return (
+    <Wrapper
+      {...rest}
+      as="div"
+      datetime={data['iso']}
+      dangerouslySetInnerHTML={isHtml ? rendered : null}
+    >
+      {isHtml ? null : rendered}
+    </Wrapper>
+  );
 }
 
 /**
  * @param {!Date} date
- * @param {!DateDisplayDef.Props} props
- * @return {?EnhancedVariablesV2Def}
+ * @param {string} displayIn
+ * @param {string} locale
+ * @return {!EnhancedVariablesV2Def}
  */
-function getDataForTemplate(date, props) {
-  const {displayIn = '', locale = DEFAULT_LOCALE} = props;
-
+function getDataForTemplate(date, displayIn, locale) {
   const basicData =
     displayIn.toLowerCase() === 'utc'
       ? getVariablesInUTC(date, locale)
@@ -144,6 +193,7 @@ function getVariablesInLocal(date, locale) {
     'minute': date.getMinutes(),
     'second': date.getSeconds(),
     'iso': date.toISOString(),
+    'localeString': date.toLocaleString(locale, DEFAULT_DATETIME_OPTIONS),
   };
 }
 
@@ -177,5 +227,6 @@ function getVariablesInUTC(date, locale) {
     'minute': date.getUTCMinutes(),
     'second': date.getUTCSeconds(),
     'iso': date.toISOString(),
+    'localeString': date.toLocaleString(locale, DEFAULT_DATETIME_OPTIONS_UTC),
   };
 }
diff --git a/extensions/amp-date-display/1.0/date-display.type.js b/extensions/amp-date-display/1.0/date-display.type.js
index 6dad05a0fcdf..947845e21421 100644
--- a/extensions/amp-date-display/1.0/date-display.type.js
+++ b/extensions/amp-date-display/1.0/date-display.type.js
@@ -19,28 +19,15 @@
 /** @const */
 var DateDisplayDef = {};
 
+// TODO(#29293): The `displayIn` and `locale` actually allow `|undefined` and
+// are defaulted in the component.
+
 /**
  * @typedef {{
  *   datetime: (!Date|number|string),
- *   displayIn: (string|undefined),
- *   locale: (string|undefined),
- *   render: (function(!JsonObject, (?PreactDef.Renderable|undefined)):PreactDef.Renderable),
- *   children: (?PreactDef.Renderable|undefined),
+ *   displayIn: (string),
+ *   locale: (string),
+ *   render: (?RendererFunctionType|undefined),
  * }}
  */
 DateDisplayDef.Props;
-
-/**
- * @typedef {{
- *   children: (?PreactDef.Renderable|undefined),
- * }}
- */
-DateDisplayDef.AsyncRenderProps;
-
-/**
- * @typedef {{
- *   dom: !Element,
- *   host: !Element,
- * }}
- */
-DateDisplayDef.RenderDomTreeProps;
diff --git a/extensions/amp-date-display/1.0/render-dom-tree.js b/extensions/amp-date-display/1.0/render-dom-tree.js
deleted file mode 100644
index 627fdc449024..000000000000
--- a/extensions/amp-date-display/1.0/render-dom-tree.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS-IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {AmpEvents} from '../../../src/amp-events';
-import {createCustomEvent} from '../../../src/event-helper';
-import {dev, devAssert} from '../../../src/log';
-import {removeChildren} from '../../../src/dom';
-import {useResourcesNotify} from '../../../src/preact/utils';
-
-/**
- * Clears the host element and appends the DOM tree into it.
- *
- * @param {!DateDisplayDef.RenderDomTreeProps} props
- * @return {?PreactDef.Renderable}
- */
-export function RenderDomTree({dom, host}) {
-  useResourcesNotify();
-
-  removeChildren(dev().assertElement(host));
-  if (dom) {
-    host.appendChild(dom);
-  }
-
-  const event = createCustomEvent(
-    devAssert(host.ownerDocument.defaultView),
-    AmpEvents.DOM_UPDATE,
-    /* detail */ null,
-    {bubbles: true}
-  );
-  host.dispatchEvent(event);
-
-  return null;
-}
diff --git a/extensions/amp-date-display/1.0/storybook/Basic.amp.js b/extensions/amp-date-display/1.0/storybook/Basic.amp.js
index af85afcfabba..4ad813857c5c 100644
--- a/extensions/amp-date-display/1.0/storybook/Basic.amp.js
+++ b/extensions/amp-date-display/1.0/storybook/Basic.amp.js
@@ -15,11 +15,14 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {date, withKnobs} from '@storybook/addon-knobs';
+import {date, select, withKnobs} from '@storybook/addon-knobs';
 import {storiesOf} from '@storybook/preact';
 import {withA11y} from '@storybook/addon-a11y';
 import {withAmp} from '@ampproject/storybook-addon';
 
+const DISPLAY_IN_OPTIONS = ['utc', 'local'];
+const LOCALES = ['en-US', 'en-GB', 'fr', 'ru', 'ar', 'he', 'ja'];
+
 // eslint-disable-next-line
 storiesOf('amp-date-display-1_0', module)
   .addDecorator(withKnobs)
@@ -28,15 +31,23 @@ storiesOf('amp-date-display-1_0', module)
   .addParameters({
     extensions: [
       {name: 'amp-date-display', version: '1.0'},
-      {name: 'amp-mustache', version: '0.1'},
+      {name: 'amp-mustache', version: '0.2'},
     ],
     experiments: ['amp-date-display-bento'],
   })
-  .add('responsive', () => {
+  .add('default', () => {
     const datetime = new Date(date('Date/Time', new Date())).toISOString();
+    const displayIn = select(
+      'Display in',
+      DISPLAY_IN_OPTIONS,
+      DISPLAY_IN_OPTIONS[0]
+    );
+    const locale = select('Locale', LOCALES, LOCALES[0]);
     return (
       <amp-date-display
         datetime={datetime}
+        display-in={displayIn}
+        locale={locale}
         layout="responsive"
         width="100"
         height="100"
@@ -49,4 +60,56 @@ storiesOf('amp-date-display-1_0', module)
         </template>
       </amp-date-display>
     );
+  })
+  .add('default renderer', () => {
+    const datetime = new Date(date('Date/Time', new Date())).toISOString();
+    const displayIn = select(
+      'Display in',
+      DISPLAY_IN_OPTIONS,
+      DISPLAY_IN_OPTIONS[0]
+    );
+    const locale = select('Locale', LOCALES, LOCALES[0]);
+    return (
+      <amp-date-display
+        datetime={datetime}
+        display-in={displayIn}
+        locale={locale}
+        layout="responsive"
+        width="100"
+        height="100"
+      />
+    );
+  })
+  .add('external template', () => {
+    const datetime = new Date(date('Date/Time', new Date())).toISOString();
+    const displayIn = select(
+      'Display in',
+      DISPLAY_IN_OPTIONS,
+      DISPLAY_IN_OPTIONS[0]
+    );
+    const locale = select('Locale', LOCALES, LOCALES[0]);
+    const template = select(
+      'Template',
+      ['template1', 'template2'],
+      'template1'
+    );
+    return (
+      <div>
+        <template type="amp-mustache" id="template1">
+          <div>{`Template1: {{dayName}} {{day}} {{monthName}} {{year}}`}</div>
+        </template>
+        <template type="amp-mustache" id="template2">
+          <div>{`Template2: {{day}} {{month}} {{year}}`}</div>
+        </template>
+        <amp-date-display
+          datetime={datetime}
+          display-in={displayIn}
+          locale={locale}
+          template={template}
+          layout="responsive"
+          width="100"
+          height="100"
+        ></amp-date-display>
+      </div>
+    );
   });
diff --git a/extensions/amp-date-display/1.0/storybook/Basic.js b/extensions/amp-date-display/1.0/storybook/Basic.js
index 1e172f50a3ac..c5ec4d987a57 100644
--- a/extensions/amp-date-display/1.0/storybook/Basic.js
+++ b/extensions/amp-date-display/1.0/storybook/Basic.js
@@ -16,7 +16,7 @@
 
 import * as Preact from '../../../../src/preact';
 import {DateDisplay} from '../date-display';
-import {date, withKnobs} from '@storybook/addon-knobs';
+import {date, select, withKnobs} from '@storybook/addon-knobs';
 import {withA11y} from '@storybook/addon-a11y';
 
 export default {
@@ -25,12 +25,38 @@ export default {
   decorators: [withA11y, withKnobs],
 };
 
+const DISPLAY_IN_OPTIONS = ['utc', 'local'];
+const LOCALES = ['en-US', 'en-GB', 'fr', 'ru', 'ar', 'he', 'ja'];
+
 export const _default = () => {
   const dateTime = date('Date/time', new Date());
+  const displayIn = select(
+    'Display in',
+    DISPLAY_IN_OPTIONS,
+    DISPLAY_IN_OPTIONS[0]
+  );
+  const locale = select('Locale', LOCALES, LOCALES[0]);
   return (
     <DateDisplay
       datetime={dateTime}
-      render={(date) => <span>{`The ISO date is ${date.iso}`}</span>}
+      displayIn={displayIn}
+      locale={locale}
+      render={(date) => (
+        <div>{`ISO: ${date.iso}; locale: ${date.localeString}`}</div>
+      )}
     />
   );
 };
+
+export const defaultRenderer = () => {
+  const displayIn = select(
+    'Display in',
+    DISPLAY_IN_OPTIONS,
+    DISPLAY_IN_OPTIONS[0]
+  );
+  const dateTime = date('Date/time', new Date());
+  const locale = select('Locale', LOCALES, LOCALES[0]);
+  return (
+    <DateDisplay datetime={dateTime} displayIn={displayIn} locale={locale} />
+  );
+};
diff --git a/extensions/amp-date-display/1.0/test/test-amp-date-display.js b/extensions/amp-date-display/1.0/test/test-amp-date-display.js
index fb74a9e08e6a..2a68ae1f61a8 100644
--- a/extensions/amp-date-display/1.0/test/test-amp-date-display.js
+++ b/extensions/amp-date-display/1.0/test/test-amp-date-display.js
@@ -15,46 +15,42 @@
  */
 
 import '../../../amp-mustache/0.2/amp-mustache';
-import * as lolex from 'lolex';
 import {parseDateAttrs} from '../amp-date-display';
-import {
-  waitForChildPromise,
-  whenUpgradedToCustomElement,
-} from '../../../../src/dom';
+import {waitFor} from '../../../../testing/test-helper.js';
+import {whenUpgradedToCustomElement} from '../../../../src/dom';
 
 describes.realWin(
   'amp-date-display 1.0',
   {
     amp: {
-      runtimeOn: true,
       extensions: ['amp-mustache:0.2', 'amp-date-display:1.0'],
     },
   },
   (env) => {
     let win;
-    let element;
-    let clock;
+    let element, template;
 
-    async function getRenderedData() {
+    async function waitRendered() {
       await whenUpgradedToCustomElement(element);
-      await element.whenBuilt();
-      await waitForChildPromise(element, () => {
-        // The rendered container inserts a div element.
-        return element.querySelector('div');
-      });
+      await element.build();
+      await waitFor(() => {
+        // The rendered container inserts a <div> element.
+        const div = element.querySelector('div');
+        return div && div.textContent;
+      }, 'wrapper div rendered');
+      return element.querySelector('div');
+    }
 
-      return JSON.parse(element.textContent);
+    async function getRenderedData() {
+      const wrapper = await waitRendered();
+      return JSON.parse(wrapper.textContent);
     }
 
     beforeEach(() => {
       win = env.win;
-      clock = lolex.install({
-        target: window,
-        now: new Date('2018-01-01T08:00:00Z'),
-      });
 
       element = win.document.createElement('amp-date-display');
-      const template = win.document.createElement('template');
+      template = win.document.createElement('template');
       template.setAttribute('type', 'amp-mustache');
       template.content.textContent = JSON.stringify({
         year: '{{year}}',
@@ -82,11 +78,6 @@ describes.realWin(
       element.setAttribute('layout', 'nodisplay');
     });
 
-    afterEach(() => {
-      clock.runAll();
-      clock.uninstall();
-    });
-
     it('renders mustache template into element', async () => {
       element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
       element.setAttribute('display-in', 'UTC');
@@ -146,6 +137,16 @@ describes.realWin(
       expect(data.dayPeriod).to.equal('am');
     });
 
+    it('renders default template into element', async () => {
+      element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
+      element.setAttribute('display-in', 'UTC');
+      element.removeChild(template);
+      win.document.body.appendChild(element);
+
+      const wrapper = await waitRendered();
+      expect(wrapper.textContent).to.contain('2001');
+    });
+
     it('does not rerender', async () => {
       element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
       win.document.body.appendChild(element);
diff --git a/extensions/amp-date-display/1.0/test/test-date-display.js b/extensions/amp-date-display/1.0/test/test-date-display.js
index 1491ce5ad74e..8fc6eaf012d4 100644
--- a/extensions/amp-date-display/1.0/test/test-date-display.js
+++ b/extensions/amp-date-display/1.0/test/test-date-display.js
@@ -44,9 +44,32 @@ describes.sandboxed('DateDisplay 1.0 preact component', {}, (env) => {
     clock.runAll();
   });
 
+  function syncPromise(response) {
+    return {
+      then(callback) {
+        callback(response);
+      },
+    };
+  }
+
   // Unfortunately, we cannot test the most interesting case of UTC datetime
   // displayed in local, because the test would work in only one time zone.
 
+  it('should render as a div by default', () => {
+    const props = {
+      render,
+      datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+      displayIn: 'UTC',
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+
+    // This is actually fairly arbitrary that it should be a "div". But it's
+    // checked here to ensure that we can change it controllably when needed.
+    expect(wrapper.getDOMNode().tagName).to.equal('DIV');
+  });
+
   it('provides all variables in UTC and English (default)', () => {
     const props = {
       render,
@@ -79,6 +102,31 @@ describes.sandboxed('DateDisplay 1.0 preact component', {}, (env) => {
     expect(data.dayPeriod).to.equal('am');
   });
 
+  it('should handle an async renderer', () => {
+    const props = {
+      render: (data) => syncPromise(render(data)),
+      datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+      displayIn: 'UTC',
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+    const data = JSON.parse(wrapper.text());
+    expect(data.year).to.equal('2001');
+    expect(data.yearTwoDigit).to.equal('01');
+  });
+
+  it('should use a default renderer in UTC', () => {
+    const props = {
+      datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+      displayIn: 'UTC',
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+    expect(wrapper.text()).to.equal('Feb 3, 2001, 4:05 AM');
+  });
+
   it('accepts Date type', () => {
     const props = {
       render,
diff --git a/extensions/amp-mustache/0.1/amp-mustache.js b/extensions/amp-mustache/0.1/amp-mustache.js
index 493e5a8af533..8e9b38a2dccf 100644
--- a/extensions/amp-mustache/0.1/amp-mustache.js
+++ b/extensions/amp-mustache/0.1/amp-mustache.js
@@ -120,16 +120,31 @@ export class AmpMustache extends BaseTemplate {
 
   /** @override */
   render(data) {
+    const html = this.render_(data);
+    return this.serializeHtml_(html);
+  }
+
+  /** @override */
+  renderAsString(data) {
+    const html = this.render_(data);
+    return sanitizeHtml(html, this.win.document);
+  }
+
+  /**
+   * @param {!JsonObject|string} data
+   * @return {string}
+   * @private
+   */
+  render_(data) {
     let mustacheData = data;
     if (typeof data === 'object') {
       mustacheData = {...data, ...this.nestedTemplates_};
     }
-    const html = mustache.render(
+    return mustache.render(
       this.template_,
       mustacheData,
       /* partials */ undefined
     );
-    return this.serializeHtml_(html);
   }
 
   /**
diff --git a/extensions/amp-mustache/0.1/test/test-amp-mustache.js b/extensions/amp-mustache/0.1/test/test-amp-mustache.js
index 07ff320c047c..c8dc4210593c 100644
--- a/extensions/amp-mustache/0.1/test/test-amp-mustache.js
+++ b/extensions/amp-mustache/0.1/test/test-amp-mustache.js
@@ -65,7 +65,7 @@ describes.repeated(
       };
       innerHtmlSetup = (html) => {
         if (isTemplateType) {
-          templateElement./*OK*/ innerHTML = html;
+          templateElement.innerHTML = html;
         } else if (isTemplateTypeScript) {
           templateElement.textContent = html;
         }
@@ -77,25 +77,30 @@ describes.repeated(
     it('should render', () => {
       textContentSetup('value = {{value}}');
       template.compileCallback();
-      const result = template.render({value: 'abc'});
-      expect(result./*OK*/ innerHTML).to.equal('value = abc');
+      const data = {value: 'abc'};
+      expect(template.render(data).innerHTML).to.equal('value = abc');
+      expect(template.renderAsString(data)).to.equal('value = abc');
     });
 
     it('should render {{.}} from string', () => {
       textContentSetup('value = {{.}}');
       template.compileCallback();
-      const result = template.render('abc');
-      expect(result./*OK*/ innerHTML).to.equal('value = abc');
+      const data = 'abc';
+      expect(template.render(data).innerHTML).to.equal('value = abc');
+      expect(template.renderAsString(data)).to.equal('value = abc');
     });
 
     it('should sanitize output', () => {
       innerHtmlSetup('value = <a href="{{value}}">abc</a>');
       template.compileCallback();
+      const data = {
+        value: /*eslint no-script-url: 0*/ 'javascript:alert();',
+      };
       allowConsoleError(() => {
-        const result = template.render({
-          value: /*eslint no-script-url: 0*/ 'javascript:alert();',
-        });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(template.render(data).innerHTML).to.equal(
+          'value = <a target="_top">abc</a>'
+        );
+        expect(template.renderAsString(data)).to.equal(
           'value = <a target="_top">abc</a>'
         );
       });
@@ -106,14 +111,33 @@ describes.repeated(
         'value = <{{value}} href="javascript:alert(0)">abc</{{value}}>'
       );
       template.compileCallback();
-      const result = template.render({
-        value: 'a',
-      });
-      expect(result./*OK*/ innerHTML).to.not.equal(
+      const data = {value: 'a'};
+      expect(template.render(data).innerHTML).to.not.equal(
+        '<a href="javascript:alert(0)">abc</a>'
+      );
+      expect(template.renderAsString(data)).to.not.equal(
         '<a href="javascript:alert(0)">abc</a>'
       );
     });
 
+    it('should unwrap output on compile', () => {
+      innerHtmlSetup('<a>abc</a>');
+      template.compileCallback();
+      const result = template.render({});
+      expect(result.tagName).to.equal('A');
+      expect(result.innerHTML).to.equal('abc');
+      expect(template.renderAsString({})).to.equal('<a>abc</a>');
+    });
+
+    it('should render fragments', () => {
+      innerHtmlSetup('<a>abc</a><a>def</a>');
+      template.compileCallback();
+      const result = template.render({});
+      expect(result.tagName).to.equal('DIV');
+      expect(result.innerHTML).to.equal('<a>abc</a><a>def</a>');
+      expect(template.renderAsString({})).to.equal('<a>abc</a><a>def</a>');
+    });
+
     describe('Sanitizing data- attributes', () => {
       it('should sanitize templated attribute names', () => {
         innerHtmlSetup('value = <a {{value}}="javascript:alert(0)">abc</a>');
@@ -151,7 +175,7 @@ describes.repeated(
           const result = template.render({
             value: /*eslint no-script-url: 0*/ 'javascript:alert();',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'value = <a data-="" style="color:red;" target="_top">abc</a>'
           );
         });
@@ -163,7 +187,7 @@ describes.repeated(
         const result = template.render({
           value: 'https://google.com/',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <a data-=""' +
             ' href="https://google.com/" target="_top">abc</a>'
         );
@@ -181,7 +205,7 @@ describes.repeated(
             value: 'myid',
             invalidValue: /*eslint no-script-url: 0*/ 'javascript:alert();',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'value = <a data-my-id="myid">abc</a>'
           );
         });
@@ -201,7 +225,7 @@ describes.repeated(
             value: 'myid',
             invalidValue: /*eslint no-script-url: 0*/ 'javascript:alert();',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'value = <input value="myid" type="text">'
           );
         });
@@ -210,10 +234,11 @@ describes.repeated(
       it('should allow rendering textarea', () => {
         innerHtmlSetup('value = <textarea>{{value}}</textarea>');
         template.compileCallback();
-        const result = template.render({
-          value: 'Cool story bro.',
-        });
-        expect(result./*OK*/ innerHTML).to.equal(
+        const data = {value: 'Cool story bro.'};
+        expect(template.render(data).innerHTML).to.equal(
+          'value = <textarea>Cool story bro.</textarea>'
+        );
+        expect(template.renderAsString(data)).to.equal(
           'value = <textarea>Cool story bro.</textarea>'
         );
       });
@@ -226,9 +251,7 @@ describes.repeated(
             value: 'myid',
             type: 'image',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
 
         allowConsoleError(() => {
@@ -236,16 +259,14 @@ describes.repeated(
             value: 'myid',
             type: 'button',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
 
         const fileResult = template.render({
           value: 'myid',
           type: 'file',
         });
-        expect(fileResult./*OK*/ innerHTML).to.equal(
+        expect(fileResult.innerHTML).to.equal(
           'value = <input value="myid" type="file">'
         );
 
@@ -253,7 +274,7 @@ describes.repeated(
           value: 'myid',
           type: 'password',
         });
-        expect(passwordResult./*OK*/ innerHTML).to.equal(
+        expect(passwordResult.innerHTML).to.equal(
           'value = <input value="myid" type="password">'
         );
       });
@@ -265,7 +286,7 @@ describes.repeated(
           value: 'myid',
           type: 'text',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <input value="myid" type="text">'
         );
       });
@@ -283,9 +304,7 @@ describes.repeated(
           const result = template.render({
             value: 'myid',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
       });
 
@@ -298,7 +317,7 @@ describes.repeated(
         const result = template.render({
           value: 'myid',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <form><input value="myid"></form><input value="hello">'
         );
       });
@@ -313,7 +332,7 @@ describes.repeated(
         );
         template.compileCallback();
         const result = template.render({});
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'text before a template ' +
             '<template type="amp-mustache">text inside template</template> ' +
             'text after a template'
@@ -329,7 +348,7 @@ describes.repeated(
           );
           template.compileCallback();
           const result = template.render({});
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'text before a template  text after a template'
           );
         });
@@ -346,7 +365,7 @@ describes.repeated(
             mutualValue: 'Mutual',
             nestedOnlyValue: 'Nested',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'outer: Outer Mutual ' +
               '<template type="amp-mustache">nested: {{nestedOnlyValue}}' +
               ' {{mutualValue}}</template>'
@@ -355,7 +374,7 @@ describes.repeated(
 
         it('should compile and render nested templates when invoked', () => {
           const outerTemplateElement = document.createElement('template');
-          outerTemplateElement./*OK*/ innerHTML =
+          outerTemplateElement.innerHTML =
             'outer: {{value}} ' +
             '<template type="amp-mustache">nested: {{value}}</template>';
           const outerTemplate = new AmpMustache(outerTemplateElement);
@@ -369,12 +388,12 @@ describes.repeated(
           const nestedResult = nestedTemplate.render({
             value: 'Nested',
           });
-          expect(nestedResult./*OK*/ innerHTML).to.equal('nested: Nested');
+          expect(nestedResult.innerHTML).to.equal('nested: Nested');
         });
 
         it('should sanitize the inner template when it gets rendered', () => {
           const outerTemplateElement = document.createElement('template');
-          outerTemplateElement./*OK*/ innerHTML =
+          outerTemplateElement.innerHTML =
             'outer: {{value}} ' +
             '<template type="amp-mustache">' +
             '<div onclick="javascript:alert(\'I am evil\')">nested</div>: ' +
@@ -391,7 +410,7 @@ describes.repeated(
             const nestedResult = nestedTemplate.render({
               value: 'Nested',
             });
-            expect(nestedResult./*OK*/ innerHTML).to.equal(
+            expect(nestedResult.innerHTML).to.equal(
               '<div>nested</div>: Nested'
             );
           });
@@ -401,7 +420,7 @@ describes.repeated(
           'should not allow users to pass data having key that starts with ' +
             '__AMP_NESTED_TEMPLATE_0 when there is a nested template',
           () => {
-            templateElement./*OK*/ innerHTML =
+            templateElement.innerHTML =
               'outer: {{value}} ' +
               '<template type="amp-mustache">nested: {{value}}</template>';
             template.compileCallback();
@@ -409,7 +428,7 @@ describes.repeated(
               __AMP_NESTED_TEMPLATE_0: 'MUST NOT RENDER THIS',
               value: 'Outer',
             });
-            expect(result./*OK*/ innerHTML).to.equal(
+            expect(result.innerHTML).to.equal(
               'outer: Outer ' +
                 '<template type="amp-mustache">nested: {{value}}</template>'
             );
@@ -421,12 +440,12 @@ describes.repeated(
             ' there are no nested templates, even though it is not a weird name' +
             ' for a template variable',
           () => {
-            templateElement./*OK*/ innerHTML = '{{__AMP_NESTED_TEMPLATE_0}}';
+            templateElement.innerHTML = '{{__AMP_NESTED_TEMPLATE_0}}';
             template.compileCallback();
             const result = template.render({
               __AMP_NESTED_TEMPLATE_0: '123',
             });
-            expect(result./*OK*/ innerHTML).to.equal('123');
+            expect(result.innerHTML).to.equal('123');
           }
         );
       }
@@ -444,7 +463,7 @@ describes.repeated(
             '<small></small><strong></strong><sub></sub>' +
             '<sup></sup><time></time><u></u><hr>',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <b>abc</b><div>def</div>' +
             '<br><code></code><del></del><em></em>' +
             '<i></i><ins></ins><mark></mark><s></s>' +
@@ -470,7 +489,7 @@ describes.repeated(
             '</tr></tfoot>' +
             '</table>',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <table class="valid-class">' +
             '<colgroup><col><col></colgroup>' +
             '<caption>caption</caption>' +
@@ -494,7 +513,7 @@ describes.repeated(
               '<a href="javascript:alert(\'XSS\')">test</a>' +
               '<img src="x" onerror="alert(\'XSS\')" />',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'value = <a target="_top">test</a>'
           );
         });
@@ -522,20 +541,21 @@ describes.repeated(
       if (isTemplateTypeScript) {
         it('should not foster text nodes in script template', () => {
           return allowConsoleError(() => {
-            const result = template.render({
+            const data = {
               'content': 'Howdy',
               'replies': [{'content': 'hi'}],
-            });
-            expect(result.innerHTML).to.equal(
+            };
+            const result =
               '<tbody>' +
-                '<tr>' +
-                '<td>Howdy</td>' +
-                '</tr>' +
-                '<tr>' +
-                '<td>hi</td>' +
-                '</tr>' +
-                '</tbody>'
-            );
+              '<tr>' +
+              '<td>Howdy</td>' +
+              '</tr>' +
+              '<tr>' +
+              '<td>hi</td>' +
+              '</tr>' +
+              '</tbody>';
+            expect(template.render(data).innerHTML).to.equal(result);
+            expect(template.renderAsString(data)).to.equal(result);
           });
         });
       }
@@ -589,21 +609,13 @@ describes.repeated(
       });
     });
 
-    it('should unwrap output on compile', () => {
-      innerHtmlSetup('<a>abc</a>');
-      template.compileCallback();
-      const result = template.render({});
-      expect(result.tagName).to.equal('A');
-      expect(result./*OK*/ innerHTML).to.equal('abc');
-    });
-
     describe('setHtml()', () => {
       it('should unwrap singular element output', () => {
         template.compileCallback();
         const result = template.setHtml('<a>abc</a>');
         expect(result).to.have.length(1);
         expect(result[0].tagName).to.equal('A');
-        expect(result[0]./*OK*/ innerHTML).to.equal('abc');
+        expect(result[0].innerHTML).to.equal('abc');
       });
 
       it('should wrap singular text node output', () => {
@@ -611,7 +623,7 @@ describes.repeated(
         const result = template.setHtml('abc');
         expect(result).to.have.length(1);
         expect(result[0].tagName).to.equal('DIV');
-        expect(result[0]./*OK*/ innerHTML).to.equal('abc');
+        expect(result[0].innerHTML).to.equal('abc');
       });
 
       it('should unwrap output with many elements', () => {
@@ -620,9 +632,9 @@ describes.repeated(
         expect(result).to.have.length(2);
         const {0: first, 1: second} = result;
         expect(first.tagName).to.equal('A');
-        expect(first./*OK*/ innerHTML).to.equal('abc');
+        expect(first.innerHTML).to.equal('abc');
         expect(second.tagName).to.equal('A');
-        expect(second./*OK*/ innerHTML).to.equal('def');
+        expect(second.innerHTML).to.equal('def');
       });
 
       it('should unwrap output with many elements and wrap text nodes', () => {
@@ -634,11 +646,11 @@ describes.repeated(
         expect(result).to.have.length(3);
         const {0: first, 1: second, 2: third} = result;
         expect(first.tagName).to.equal('A');
-        expect(first./*OK*/ innerHTML).to.equal('abc');
+        expect(first.innerHTML).to.equal('abc');
         expect(second.tagName).to.equal('DIV');
-        expect(second./*OK*/ innerHTML).to.equal('def');
+        expect(second.innerHTML).to.equal('def');
         expect(third.tagName).to.equal('A');
-        expect(third./*OK*/ innerHTML).to.equal('ghi  ');
+        expect(third.innerHTML).to.equal('ghi  ');
       });
 
       it('should unwrap output with many elements and preserve subtrees', () => {
@@ -655,11 +667,11 @@ describes.repeated(
         expect(first.tagName).to.equal('DIV');
         expect(first.children).to.have.length(1);
         expect(first.firstElementChild.tagName).to.equal('A');
-        expect(first.firstElementChild./*OK*/ innerHTML).to.equal('abc');
+        expect(first.firstElementChild.innerHTML).to.equal('abc');
         expect(second.tagName).to.equal('DIV');
-        expect(second./*OK*/ innerHTML).to.equal('def');
+        expect(second.innerHTML).to.equal('def');
         expect(third.tagName).to.equal('A');
-        expect(third./*OK*/ innerHTML).to.equal('ghi  ');
+        expect(third.innerHTML).to.equal('ghi  ');
       });
     });
   }
diff --git a/extensions/amp-mustache/0.2/amp-mustache.js b/extensions/amp-mustache/0.2/amp-mustache.js
index 4a3d5994b8b9..58b4017d36b7 100644
--- a/extensions/amp-mustache/0.2/amp-mustache.js
+++ b/extensions/amp-mustache/0.2/amp-mustache.js
@@ -117,12 +117,26 @@ export class AmpMustache extends BaseTemplate {
   /** @override */
   setHtml(html) {
     const wrapped = `<div>${html}</div>`;
-    const purified = this.purifyAndSetHtml_(wrapped);
+    const purified = this.tryUnwrap(this.purifyAndSetHtml_(wrapped));
     return this.unwrapChildren(purified);
   }
 
   /** @override */
   render(data) {
+    return this.tryUnwrap(this.render_(data));
+  }
+
+  /** @override */
+  renderAsString(data) {
+    return this.render_(data)./*OK*/ innerHTML;
+  }
+
+  /**
+   * @param {!JsonObject|string} data
+   * @return {!Element}
+   * @private
+   */
+  render_(data) {
     let mustacheData = data;
     // Also render any nested templates.
     if (typeof data === 'object') {
@@ -137,15 +151,13 @@ export class AmpMustache extends BaseTemplate {
   }
 
   /**
-   *
    * @param {string} html
    * @return {!Element}
    * @private
    */
   purifyAndSetHtml_(html) {
     const body = this.purifier_.purifyHtml(`<div>${html}</div>`);
-    const div = body.firstElementChild;
-    return this.tryUnwrap(div);
+    return body.firstElementChild;
   }
 }
 
diff --git a/extensions/amp-mustache/0.2/test/test-amp-mustache.js b/extensions/amp-mustache/0.2/test/test-amp-mustache.js
index 8cc21097b1f3..5d760e71a244 100644
--- a/extensions/amp-mustache/0.2/test/test-amp-mustache.js
+++ b/extensions/amp-mustache/0.2/test/test-amp-mustache.js
@@ -67,7 +67,7 @@ describes.repeated(
       };
       innerHtmlSetup = (html) => {
         if (isTemplateType) {
-          templateElement./*OK*/ innerHTML = html;
+          templateElement.innerHTML = html;
         } else if (isTemplateTypeScript) {
           templateElement.textContent = html;
         }
@@ -79,8 +79,9 @@ describes.repeated(
     it('should render', () => {
       textContentSetup('value = {{value}}');
       template.compileCallback();
-      const result = template.render({value: 'abc'});
-      expect(result./*OK*/ innerHTML).to.equal('value = abc');
+      const data = {value: 'abc'};
+      expect(template.render(data).innerHTML).to.equal('value = abc');
+      expect(template.renderAsString(data)).to.equal('value = abc');
     });
 
     // https://github.com/ampproject/amphtml/pull/17401
@@ -103,17 +104,21 @@ describes.repeated(
     it('should render {{.}} from string', () => {
       textContentSetup('value = {{.}}');
       template.compileCallback();
-      const result = template.render('abc');
-      expect(result./*OK*/ innerHTML).to.equal('value = abc');
+      const data = 'abc';
+      expect(template.render(data).innerHTML).to.equal('value = abc');
+      expect(template.renderAsString(data)).to.equal('value = abc');
     });
 
     it('should sanitize output', () => {
       innerHtmlSetup('value = <a href="{{value}}">abc</a>');
       template.compileCallback();
-      const result = template.render({
+      const data = {
         value: /*eslint no-script-url: 0*/ 'javascript:alert();',
-      });
-      expect(result./*OK*/ innerHTML).to.equal(
+      };
+      expect(template.render(data).innerHTML).to.equal(
+        'value = <a target="_top">abc</a>'
+      );
+      expect(template.renderAsString(data)).to.equal(
         'value = <a target="_top">abc</a>'
       );
     });
@@ -123,14 +128,35 @@ describes.repeated(
         'value = <{{value}} href="javascript:alert(0)">abc</{{value}}>'
       );
       template.compileCallback();
-      const result = template.render({
+      const data = {
         value: 'a',
-      });
-      expect(result./*OK*/ innerHTML).to.not.equal(
+      };
+      expect(template.render(data).innerHTML).to.not.equal(
+        '<a href="javascript:alert(0)">abc</a>'
+      );
+      expect(template.renderAsString(data)).to.not.equal(
         '<a href="javascript:alert(0)">abc</a>'
       );
     });
 
+    it('should unwrap output on compile', () => {
+      innerHtmlSetup('<a>abc</a>');
+      template.compileCallback();
+      const result = template.render({});
+      expect(result.tagName).to.equal('A');
+      expect(result.innerHTML).to.equal('abc');
+      expect(template.renderAsString({})).to.equal('<a>abc</a>');
+    });
+
+    it('should render fragments', () => {
+      innerHtmlSetup('<a>abc</a><a>def</a>');
+      template.compileCallback();
+      const result = template.render({});
+      expect(result.tagName).to.equal('DIV');
+      expect(result.innerHTML).to.equal('<a>abc</a><a>def</a>');
+      expect(template.renderAsString({})).to.equal('<a>abc</a><a>def</a>');
+    });
+
     describe('Sanitizing data- attributes', () => {
       it('should sanitize templated attribute names', () => {
         innerHtmlSetup('value = <a {{value}}="javascript:alert(0)">abc</a>');
@@ -163,9 +189,7 @@ describes.repeated(
         const result = template.render({
           value: /*eslint no-script-url: 0*/ 'javascript:alert();',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
-          'value = <a target="_top">abc</a>'
-        );
+        expect(result.innerHTML).to.equal('value = <a target="_top">abc</a>');
       });
 
       it('should parse data-&attr=value output correctly', () => {
@@ -174,7 +198,7 @@ describes.repeated(
         const result = template.render({
           value: 'https://google.com/',
         });
-        expect(result./*OK*/ innerHTML).to.equal('value = <a>abc</a>');
+        expect(result.innerHTML).to.equal('value = <a>abc</a>');
       });
 
       it('should allow for data-attr=value to output correctly', () => {
@@ -188,7 +212,7 @@ describes.repeated(
           value: 'myid',
           invalidValue: /*eslint no-script-url: 0*/ 'javascript:alert();',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = ' +
             '<a data-my-id="myid" data-my-attr="javascript:alert();">abc</a>'
         );
@@ -205,18 +229,17 @@ describes.repeated(
           value: 'myid',
           invalidValue: /*eslint no-script-url: 0*/ 'javascript:alert();',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
-          'value = <input value="myid">'
-        );
+        expect(result.innerHTML).to.equal('value = <input value="myid">');
       });
 
       it('should allow rendering textarea', () => {
         innerHtmlSetup('value = <textarea>{{value}}</textarea>');
         template.compileCallback();
-        const result = template.render({
-          value: 'Cool story bro.',
-        });
-        expect(result./*OK*/ innerHTML).to.equal(
+        const data = {value: 'Cool story bro.'};
+        expect(template.render(data).innerHTML).to.equal(
+          'value = <textarea>Cool story bro.</textarea>'
+        );
+        expect(template.renderAsString(data)).to.equal(
           'value = <textarea>Cool story bro.</textarea>'
         );
       });
@@ -229,9 +252,7 @@ describes.repeated(
             value: 'myid',
             type: 'image',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
 
         allowConsoleError(() => {
@@ -239,16 +260,14 @@ describes.repeated(
             value: 'myid',
             type: 'button',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
 
         const fileResult = template.render({
           value: 'myid',
           type: 'file',
         });
-        expect(fileResult./*OK*/ innerHTML).to.equal(
+        expect(fileResult.innerHTML).to.equal(
           'value = <input type="file" value="myid">'
         );
 
@@ -256,7 +275,7 @@ describes.repeated(
           value: 'myid',
           type: 'password',
         });
-        expect(passwordResult./*OK*/ innerHTML).to.equal(
+        expect(passwordResult.innerHTML).to.equal(
           'value = <input type="password" value="myid">'
         );
       });
@@ -268,7 +287,7 @@ describes.repeated(
           value: 'myid',
           type: 'text',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <input type="text" value="myid">'
         );
       });
@@ -286,9 +305,7 @@ describes.repeated(
           const result = template.render({
             value: 'myid',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
       });
 
@@ -301,7 +318,7 @@ describes.repeated(
         const result = template.render({
           value: 'myid',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <form><input value="myid"></form><input value="hello">'
         );
       });
@@ -316,7 +333,7 @@ describes.repeated(
         );
         template.compileCallback();
         const result = template.render({});
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'text before a template ' +
             '<template type="amp-mustache">text inside template</template> ' +
             'text after a template'
@@ -332,7 +349,7 @@ describes.repeated(
           );
           template.compileCallback();
           const result = template.render({});
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'text before a template  text after a template'
           );
         });
@@ -349,7 +366,7 @@ describes.repeated(
             mutualValue: 'Mutual',
             nestedOnlyValue: 'Nested',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'outer: Outer Mutual ' +
               '<template type="amp-mustache">nested: {{nestedOnlyValue}}' +
               ' {{mutualValue}}</template>'
@@ -358,7 +375,7 @@ describes.repeated(
 
         it('should compile and render nested templates when invoked', () => {
           const outerTemplateElement = document.createElement('template');
-          outerTemplateElement./*OK*/ innerHTML =
+          outerTemplateElement.innerHTML =
             'outer: {{value}} ' +
             '<template type="amp-mustache">nested: {{value}}</template>';
           const outerTemplate = new AmpMustache(outerTemplateElement, window);
@@ -372,12 +389,12 @@ describes.repeated(
           const nestedResult = nestedTemplate.render({
             value: 'Nested',
           });
-          expect(nestedResult./*OK*/ innerHTML).to.equal('nested: Nested');
+          expect(nestedResult.innerHTML).to.equal('nested: Nested');
         });
 
         it('should sanitize the inner template when it gets rendered', () => {
           const outerTemplateElement = document.createElement('template');
-          outerTemplateElement./*OK*/ innerHTML =
+          outerTemplateElement.innerHTML =
             'outer: {{value}} ' +
             '<template type="amp-mustache">' +
             '<div onclick="javascript:alert(\'I am evil\')">nested</div>: ' +
@@ -393,16 +410,14 @@ describes.repeated(
           const nestedResult = nestedTemplate.render({
             value: 'Nested',
           });
-          expect(nestedResult./*OK*/ innerHTML).to.equal(
-            '<div>nested</div>: Nested'
-          );
+          expect(nestedResult.innerHTML).to.equal('<div>nested</div>: Nested');
         });
 
         it(
           'should not allow users to pass data having key that starts with ' +
             '__AMP_NESTED_TEMPLATE_0 when there is a nested template',
           () => {
-            templateElement./*OK*/ innerHTML =
+            templateElement.innerHTML =
               'outer: {{value}} ' +
               '<template type="amp-mustache">nested: {{value}}</template>';
             template.compileCallback();
@@ -410,7 +425,7 @@ describes.repeated(
               __AMP_NESTED_TEMPLATE_0: 'MUST NOT RENDER THIS',
               value: 'Outer',
             });
-            expect(result./*OK*/ innerHTML).to.equal(
+            expect(result.innerHTML).to.equal(
               'outer: Outer ' +
                 '<template type="amp-mustache">nested: {{value}}</template>'
             );
@@ -422,12 +437,12 @@ describes.repeated(
             ' there are no nested templates, even though it is not a weird name' +
             ' for a template variable',
           () => {
-            templateElement./*OK*/ innerHTML = '{{__AMP_NESTED_TEMPLATE_0}}';
+            templateElement.innerHTML = '{{__AMP_NESTED_TEMPLATE_0}}';
             template.compileCallback();
             const result = template.render({
               __AMP_NESTED_TEMPLATE_0: '123',
             });
-            expect(result./*OK*/ innerHTML).to.equal('123');
+            expect(result.innerHTML).to.equal('123');
           }
         );
       }
@@ -441,7 +456,7 @@ describes.repeated(
         innerHtmlSetup('{{{html}}}');
         template.compileCallback();
         const result = template.render({html});
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           '1<template type="amp-mustache">2</template>35'
         );
       });
@@ -459,7 +474,7 @@ describes.repeated(
             '<small></small><strong></strong><sub></sub>' +
             '<sup></sup><time></time><u></u><hr>',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <b>abc</b><div>def</div>' +
             '<br><code></code><del></del><em></em>' +
             '<i></i><ins></ins><mark></mark><s></s>' +
@@ -485,7 +500,7 @@ describes.repeated(
             '</tr></tfoot>' +
             '</table>',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <table class="valid-class">' +
             '<colgroup><col><col></colgroup>' +
             '<caption>caption</caption>' +
@@ -508,7 +523,7 @@ describes.repeated(
             '<a href="javascript:alert(\'XSS\')">test</a>' +
             '<img src="x" onerror="alert(\'XSS\')" />',
         });
-        expect(result./*OK*/ innerHTML).to.equal('value = <a>test</a>');
+        expect(result.innerHTML).to.equal('value = <a>test</a>');
       });
     });
 
@@ -533,20 +548,21 @@ describes.repeated(
       if (isTemplateTypeScript) {
         it('should not foster text nodes in script template', () => {
           return allowConsoleError(() => {
-            const result = template.render({
+            const data = {
               'content': 'Howdy',
               'replies': [{'content': 'hi'}],
-            });
-            expect(result.innerHTML).to.equal(
+            };
+            const result =
               '<tbody>' +
-                '<tr>' +
-                '<td>Howdy</td>' +
-                '</tr>' +
-                '<tr>' +
-                '<td>hi</td>' +
-                '</tr>' +
-                '</tbody>'
-            );
+              '<tr>' +
+              '<td>Howdy</td>' +
+              '</tr>' +
+              '<tr>' +
+              '<td>hi</td>' +
+              '</tr>' +
+              '</tbody>';
+            expect(template.render(data).innerHTML).to.equal(result);
+            expect(template.renderAsString(data)).to.equal(result);
           });
         });
       }
@@ -604,7 +620,7 @@ describes.repeated(
         const result = template.setHtml('<a>abc</a>');
         expect(result).to.have.length(1);
         expect(result[0].tagName).to.equal('A');
-        expect(result[0]./*OK*/ innerHTML).to.equal('abc');
+        expect(result[0].innerHTML).to.equal('abc');
       });
 
       it('should be undefined for singular text node output', () => {
@@ -612,7 +628,7 @@ describes.repeated(
         const result = template.setHtml('abc');
         expect(result).to.have.length(1);
         expect(result[0].tagName).to.equal('DIV');
-        expect(result[0]./*OK*/ innerHTML).to.equal('abc');
+        expect(result[0].innerHTML).to.equal('abc');
       });
 
       it('should unwrap output with many elements', () => {
@@ -621,9 +637,9 @@ describes.repeated(
         expect(result).to.have.length(2);
         const {0: first, 1: second} = result;
         expect(first.tagName).to.equal('A');
-        expect(first./*OK*/ innerHTML).to.equal('abc');
+        expect(first.innerHTML).to.equal('abc');
         expect(second.tagName).to.equal('A');
-        expect(second./*OK*/ innerHTML).to.equal('def');
+        expect(second.innerHTML).to.equal('def');
       });
 
       it('should unwrap output with many elements and wrap text nodes', () => {
@@ -635,11 +651,11 @@ describes.repeated(
         expect(result).to.have.length(3);
         const {0: first, 1: second, 2: third} = result;
         expect(first.tagName).to.equal('A');
-        expect(first./*OK*/ innerHTML).to.equal('abc');
+        expect(first.innerHTML).to.equal('abc');
         expect(second.tagName).to.equal('DIV');
-        expect(second./*OK*/ innerHTML).to.equal('def');
+        expect(second.innerHTML).to.equal('def');
         expect(third.tagName).to.equal('A');
-        expect(third./*OK*/ innerHTML).to.equal('ghi  ');
+        expect(third.innerHTML).to.equal('ghi  ');
       });
 
       it('should unwrap output with many elements and preserve subtrees', () => {
@@ -656,11 +672,11 @@ describes.repeated(
         expect(first.tagName).to.equal('DIV');
         expect(first.children).to.have.length(1);
         expect(first.firstElementChild.tagName).to.equal('A');
-        expect(first.firstElementChild./*OK*/ innerHTML).to.equal('abc');
+        expect(first.firstElementChild.innerHTML).to.equal('abc');
         expect(second.tagName).to.equal('DIV');
-        expect(second./*OK*/ innerHTML).to.equal('def');
+        expect(second.innerHTML).to.equal('def');
         expect(third.tagName).to.equal('A');
-        expect(third./*OK*/ innerHTML).to.equal('ghi  ');
+        expect(third.innerHTML).to.equal('ghi  ');
       });
     });
   }
diff --git a/src/preact/base-element.js b/src/preact/base-element.js
index a34e43be30b7..6d09ef883936 100644
--- a/src/preact/base-element.js
+++ b/src/preact/base-element.js
@@ -15,10 +15,12 @@
  */
 
 import * as Preact from './index';
+import {AmpEvents} from '../amp-events';
 import {Deferred} from '../utils/promise';
 import {Slot, createSlot} from './slot';
 import {WithAmpContext} from './context';
 import {childElementByTag, createElementWithAttributes, matches} from '../dom';
+import {createCustomEvent} from '../event-helper';
 import {createRef, hydrate, render} from './index';
 import {devAssert} from '../log';
 import {dict, hasOwn} from '../utils/object';
@@ -66,6 +68,11 @@ const PASSTHROUGH_MUTATION_INIT = {
   characterData: true,
 };
 
+/** @const {!MutationObserverInit} */
+const TEMPLATES_MUTATION_INIT = {
+  childList: true,
+};
+
 /** @const {!JsonObject<string, string>} */
 const SHADOW_CONTAINER_ATTRS = dict({'style': 'display: contents'});
 
@@ -82,6 +89,13 @@ const SIZE_DEFINED_STYLE = {
   'height': '100%',
 };
 
+/**
+ * This is an internal property that marks light DOM nodes that were rendered
+ * by AMP/Preact bridge and thus must be ignored by the mutation observer to
+ * avoid mutate->rerender->mutate loops.
+ */
+const RENDERED_PROP = '__AMP_RENDERED';
+
 /**
  * Wraps a Preact Component in a BaseElement class.
  *
@@ -121,6 +135,9 @@ export class PreactBaseElement extends AMP.BaseElement {
       this.rerender_();
     };
 
+    /** @private {boolean} */
+    this.hydrationPending_ = false;
+
     /** @private {!Deferred|null} */
     this.scheduledRenderDeferred_ = null;
 
@@ -151,13 +168,16 @@ export class PreactBaseElement extends AMP.BaseElement {
       Ctor['passthrough'] || Ctor['passthroughNonEmpty']
         ? PASSTHROUGH_MUTATION_INIT
         : null;
+    const templatesInit = Ctor['usesTemplate'] ? TEMPLATES_MUTATION_INIT : null;
     this.observer.observe(this.element, {
       attributes: true,
       ...childrenInit,
       ...passthroughInit,
+      ...templatesInit,
     });
 
     this.defaultProps_ = this.init() || null;
+    this.checkPropsPostMutations();
 
     const useContexts = Ctor['useContexts'];
     if (useContexts.length != 0) {
@@ -243,6 +263,33 @@ export class PreactBaseElement extends AMP.BaseElement {
     );
   }
 
+  /**
+   * A callback called immediately or after mutations have been observed. The
+   * implementation can verify if any additional properties need to be mutated
+   * via `mutateProps()` API.
+   * @protected
+   */
+  checkPropsPostMutations() {}
+
+  /**
+   * A callback called to compute props before rendering is run. The properties
+   * computed here and ephemeral and thus should not be persisted via a
+   * `mutateProps()` method.
+   * @param {!JsonObject} unusedProps
+   * @protected
+   */
+  updatePropsForRendering(unusedProps) {}
+
+  /**
+   * A callback called to check whether the element is ready for rendering.
+   * @param {!JsonObject} unusedProps
+   * @return {boolean}
+   * @protected
+   */
+  isReady(unusedProps) {
+    return true;
+  }
+
   /**
    * @param {!Array<!MutationRecord>} records
    * @private
@@ -251,6 +298,7 @@ export class PreactBaseElement extends AMP.BaseElement {
     const Ctor = this.constructor;
     const rerender = records.some((m) => shouldMutationBeRerendered(Ctor, m));
     if (rerender) {
+      this.checkPropsPostMutations();
       this.scheduleRender_();
     }
   }
@@ -280,15 +328,12 @@ export class PreactBaseElement extends AMP.BaseElement {
     }
 
     const Ctor = this.constructor;
+    const isShadow = usesShadowDom(Ctor);
+    const lightDomTag = isShadow ? null : Ctor['lightDomTag'];
 
-    let toHydrate = false;
     if (!this.container_) {
       const doc = this.win.document;
-      if (
-        Ctor['children'] ||
-        Ctor['passthrough'] ||
-        Ctor['passthroughNonEmpty']
-      ) {
+      if (isShadow) {
         devAssert(
           !Ctor['detached'],
           'The AMP element cannot be rendered in detached mode ' +
@@ -299,7 +344,7 @@ export class PreactBaseElement extends AMP.BaseElement {
         let {shadowRoot} = this.element;
         let container = shadowRoot && childElementByTag(shadowRoot, 'c');
         if (container) {
-          toHydrate = true;
+          this.hydrationPending_ = true;
         } else {
           // Create new shadow root.
           shadowRoot = this.element.attachShadow({mode: 'open'});
@@ -330,6 +375,16 @@ export class PreactBaseElement extends AMP.BaseElement {
           shadowRoot.appendChild(serviceSlot);
         }
         this.container_ = container;
+      } else if (lightDomTag) {
+        this.container_ = this.element;
+        const replacement =
+          childElementByTag(this.container_, lightDomTag) ||
+          doc.createElement(lightDomTag);
+        replacement[RENDERED_PROP] = true;
+        if (Ctor['layoutSizeDefined']) {
+          replacement.classList.add('i-amphtml-fill-content');
+        }
+        this.container_.appendChild(replacement);
       } else {
         const container = doc.createElement('i-amphtml-c');
         this.container_ = container;
@@ -345,9 +400,8 @@ export class PreactBaseElement extends AMP.BaseElement {
     // `contextValues` until available.
     const useContexts = Ctor['useContexts'];
     const contextValues = this.contextValues_;
-    const isReady =
-      toHydrate || useContexts.length == 0 || contextValues != null;
-    if (!isReady) {
+    const isContextReady = useContexts.length == 0 || contextValues != null;
+    if (!isContextReady) {
       return;
     }
 
@@ -360,6 +414,10 @@ export class PreactBaseElement extends AMP.BaseElement {
     );
     this.updatePropsForRendering(props);
 
+    if (!this.isReady(props)) {
+      return;
+    }
+
     // While this "creates" a new element, diffing will not create a second
     // instance of Component. Instead, the existing one already rendered into
     // this element will be reused.
@@ -377,10 +435,28 @@ export class PreactBaseElement extends AMP.BaseElement {
     // Add AmpContext with renderable/playable proeprties.
     const v = <WithAmpContext {...this.context_}>{comp}</WithAmpContext>;
 
-    if (toHydrate) {
+    if (this.hydrationPending_) {
+      this.hydrationPending_ = false;
       hydrate(v, this.container_);
     } else {
-      render(v, this.container_);
+      const replacement = lightDomTag
+        ? childElementByTag(this.container_, lightDomTag)
+        : null;
+      if (replacement) {
+        replacement[RENDERED_PROP] = true;
+      }
+      render(v, this.container_, replacement);
+    }
+
+    // Dispatch the DOM_UPDATE event when rendered in the light DOM.
+    if (!isShadow) {
+      this.mutateElement(() => {
+        this.element.dispatchEvent(
+          createCustomEvent(this.win, AmpEvents.DOM_UPDATE, /* detail */ null, {
+            bubbles: true,
+          })
+        );
+      });
     }
 
     const deferred = this.scheduledRenderDeferred_;
@@ -390,12 +466,6 @@ export class PreactBaseElement extends AMP.BaseElement {
     }
   }
 
-  /**
-   * @param {!JsonObject} unusedProps
-   * @protected
-   */
-  updatePropsForRendering(unusedProps) {}
-
   /**
    * @protected
    * @param {string} prop
@@ -435,6 +505,16 @@ PreactBaseElement['useContexts'] = getMode().localDev ? Object.freeze([]) : [];
  */
 PreactBaseElement['layoutSizeDefined'] = false;
 
+/**
+ * The tag name, e.g. "div", "span", time" that should be used as a replacement
+ * node for Preact rendering. This is the node that Preact will diff with
+ * with specified, instead of rendering a new node. Only applicable to light-DOM
+ * mapping styles.
+ *
+ * @protected {string}
+ */
+PreactBaseElement['lightDomTag'] = '';
+
 /**
  * An override to specify an exact className prop to Preact.
  *
@@ -462,6 +542,13 @@ PreactBaseElement['passthrough'] = false;
  */
 PreactBaseElement['passthroughNonEmpty'] = false;
 
+/**
+ * Whether this element uses "templates" system.
+ *
+ * @protected {boolean}
+ */
+PreactBaseElement['usesTemplate'] = false;
+
 /**
  * The CSS for shadow stylesheets.
  *
@@ -489,6 +576,18 @@ PreactBaseElement['props'] = {};
  */
 PreactBaseElement['children'] = null;
 
+/**
+ * @param {typeof PreactBaseElement} Ctor
+ * @return {boolean}
+ */
+function usesShadowDom(Ctor) {
+  return !!(
+    Ctor['children'] ||
+    Ctor['passthrough'] ||
+    Ctor['passthroughNonEmpty']
+  );
+}
+
 /**
  * @param {typeof PreactBaseElement} Ctor
  * @param {!AmpElement} element
@@ -497,17 +596,24 @@ PreactBaseElement['children'] = null;
  * @return {!JsonObject}
  */
 function collectProps(Ctor, element, ref, defaultProps) {
-  const props = /** @type {!JsonObject} */ ({...defaultProps, ref});
-
   const {
+    'children': childrenDefs,
     'className': className,
     'layoutSizeDefined': layoutSizeDefined,
-    'props': propDefs,
+    'lightDomTag': lightDomTag,
     'passthrough': passthrough,
     'passthroughNonEmpty': passthroughNonEmpty,
-    'children': childrenDefs,
+    'props': propDefs,
   } = Ctor;
 
+  const props = /** @type {!JsonObject} */ ({...defaultProps, ref});
+
+  // Light DOM.
+  if (lightDomTag) {
+    props[RENDERED_PROP] = true;
+    props['as'] = lightDomTag;
+  }
+
   // Class.
   if (className) {
     props['className'] = className;
@@ -515,8 +621,13 @@ function collectProps(Ctor, element, ref, defaultProps) {
 
   // Common styles.
   if (layoutSizeDefined) {
-    props['style'] = SIZE_DEFINED_STYLE;
     props['containSize'] = true;
+    if (usesShadowDom(Ctor)) {
+      props['style'] = SIZE_DEFINED_STYLE;
+    } else {
+      props['className'] =
+        `i-amphtml-fill-content ${className || ''}`.trim() || null;
+    }
   }
 
   // Props.
@@ -642,7 +753,8 @@ function shouldMutationForNodeListBeRerendered(nodeList) {
       // Ignore service elements, e.g. `<i-amphtml-svc>` or
       // `<x slot="i-amphtml-svc">`.
       if (
-        startsWith(node.tagName, 'I-AMPHTML') ||
+        node[RENDERED_PROP] ||
+        startsWith(node.tagName, 'I-') ||
         node.getAttribute('slot') == 'i-amphtml-svc'
       ) {
         continue;
@@ -664,6 +776,10 @@ function shouldMutationForNodeListBeRerendered(nodeList) {
 function shouldMutationBeRerendered(Ctor, m) {
   const {type} = m;
   if (type == 'attributes') {
+    // Check whether this is a templates attribute.
+    if (Ctor['usesTemplate'] && m.attributeName == 'template') {
+      return true;
+    }
     // Check if the attribute is mapped to one of the properties.
     const props = Ctor['props'];
     for (const name in props) {
diff --git a/src/preact/component/component.type.js b/src/preact/component/component.type.js
index e9b7df2d1dee..26b050024126 100644
--- a/src/preact/component/component.type.js
+++ b/src/preact/component/component.type.js
@@ -43,3 +43,13 @@ var WrapperComponentProps;
  * }}
  */
 var ContainWrapperComponentProps;
+
+/**
+ * @typedef {!PreactDef.Renderable|!PreactDef.InnerHTML|null}
+ */
+var RendererFunctionResponseType;
+
+/**
+ * @typedef {function(!JsonObject):(?RendererFunctionResponseType|!Promise<?RendererFunctionResponseType>)}
+ */
+var RendererFunctionType;
diff --git a/src/preact/component/index.js b/src/preact/component/index.js
index fbfcbc687aff..fa8056b9f81d 100644
--- a/src/preact/component/index.js
+++ b/src/preact/component/index.js
@@ -16,3 +16,4 @@
 
 export {ContainWrapper} from './contain';
 export {Wrapper} from './wrapper';
+export {useRenderer} from './renderer';
diff --git a/src/preact/component/renderer.js b/src/preact/component/renderer.js
new file mode 100644
index 000000000000..d391d06f1a80
--- /dev/null
+++ b/src/preact/component/renderer.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {useLayoutEffect, useState} from '../';
+
+/**
+ * Runs the renderer. It's critical that the `data` argument is stable - it
+ * only changes when the actual data changes. The renderer itself is resolved
+ * in a layout effect and allows the result to be a promise.
+ *
+ * @param {?RendererFunctionType|undefined} renderer
+ * @param {!JsonObject} data
+ * @return {?RendererFunctionResponseType}
+ */
+export function useRenderer(renderer, data) {
+  const [value, setValue] = useState(
+    /** @type {?RendererFunctionResponseType} */ (null)
+  );
+
+  useLayoutEffect(() => {
+    const rendered = (renderer && renderer(data)) || null;
+    if (rendered && typeof rendered['then'] == 'function') {
+      let canceled = false;
+      rendered.then((result) => {
+        if (!canceled) {
+          setValue(result);
+        }
+      });
+      return () => {
+        canceled = true;
+      };
+    } else {
+      setValue(/** @type {?RendererFunctionResponseType} */ (rendered));
+    }
+  }, [renderer, data]);
+
+  return value;
+}
diff --git a/src/service/template-impl.js b/src/service/template-impl.js
index 07a2edb02cae..d8672ee4b716 100644
--- a/src/service/template-impl.js
+++ b/src/service/template-impl.js
@@ -26,19 +26,18 @@ import {rootNodeFor, scopedQuerySelector} from '../dom';
  * {@link https://docs.google.com/document/d/1q-5MPQHnOHLF_uL7lQsGZdzuBgrPTkCy2PdRP-YCbOw/edit#}
  */
 
-/**
- * @typedef {typeof BaseTemplate}
- */
-let TemplateClassDef;
-
 /** @private @const {string} */
 const PROP_ = '__AMP_IMPL_';
 
 /** @private @const {string} */
 const PROP_PROMISE_ = '__AMP_WAIT_';
 
+/** @private @const {function()} */
+const EMPTY_FUNC = () => {};
+
 /**
  * The interface that is implemented by all templates.
+ * @abstract
  */
 export class BaseTemplate {
   /**
@@ -71,19 +70,25 @@ export class BaseTemplate {
    * for server-side rendering case. To be implemented by subclasses.
    * @param {string} unusedData
    * @return {!Element|!Array<Element>}
+   * @abstract
    */
-  setHtml(unusedData) {
-    throw new Error('Not implemented');
-  }
+  setHtml(unusedData) {}
 
   /**
    * To be implemented by subclasses.
    * @param {!JsonObject|string} unusedData
    * @return {!Element}
+   * @abstract
    */
-  render(unusedData) {
-    throw new Error('Not implemented');
-  }
+  render(unusedData) {}
+
+  /**
+   * To be implemented by subclasses.
+   * @param {!JsonObject|string} unusedData
+   * @return {string}
+   * @abstract
+   */
+  renderAsString(unusedData) {}
 
   /**
    * Iterate through the child nodes of the given root, applying the
@@ -165,18 +170,27 @@ export class Templates {
 
     /**
      * A map from template type to template's class promise.
-     * @private @const {!Object<string, !Promise<!TemplateClassDef>>}
+     * @private @const {!Object<string, !Promise<typeof BaseTemplate>>}
      */
     this.templateClassMap_ = {};
 
     /**
      * A map from template type to template's class promise. This is a transient
      * storage. As soon as the template class loaded, the entry is removed.
-     * @private @const {!Object<string, function(!TemplateClassDef)>}
+     * @private @const {!Object<string, function(typeof BaseTemplate)>}
      */
     this.templateClassResolvers_ = {};
   }
 
+  /**
+   * Waits for template to be fully initialized.
+   * @param {!Element} templateElement
+   * @return {!Promise}
+   */
+  whenReady(templateElement) {
+    return this.getImplementation_(templateElement).then(EMPTY_FUNC);
+  }
+
   /**
    * Inserts the specified template element.
    * @param {!Element} templateElement
@@ -201,6 +215,18 @@ export class Templates {
     });
   }
 
+  /**
+   * Renders the specified template element using the supplied data.
+   * @param {!Element} templateElement
+   * @param {!JsonObject} data
+   * @return {!Promise<!Element>}
+   */
+  renderTemplateAsString(templateElement, data) {
+    return this.getImplementation_(templateElement).then((impl) => {
+      return impl.renderAsString(data);
+    });
+  }
+
   /**
    * Renders the specified template element using the supplied array of data
    * and returns an array of resulting elements.
@@ -319,7 +345,7 @@ export class Templates {
     } else if (opt_querySelector) {
       return scopedQuerySelector(parent, opt_querySelector);
     } else {
-      return parent.querySelector('template, script[type="text/plain"]');
+      return parent.querySelector('template[type], script[type="text/plain"]');
     }
   }
 
@@ -353,7 +379,9 @@ export class Templates {
 
     promise = this.waitForTemplateClass_(element, type).then(
       (templateClass) => {
-        const impl = (element[PROP_] = new templateClass(element, this.win_));
+        // This is ugly workaround for https://github.com/google/closure-compiler/issues/2630.
+        const Constr = /** @type {function(new:Object, !Element, !Window)} */ (templateClass);
+        const impl = (element[PROP_] = new Constr(element, this.win_));
         delete element[PROP_PROMISE_];
         return impl;
       }
@@ -367,7 +395,7 @@ export class Templates {
    * will wait until the actual template script has been downloaded and parsed.
    * @param {!Element} element
    * @param {string} type
-   * @return {!Promise<!TemplateClassDef>}
+   * @return {!Promise<typeof BaseTemplate>}
    * @private
    */
   waitForTemplateClass_(element, type) {
@@ -387,7 +415,7 @@ export class Templates {
    * Registers an extended template. This function should typically be called
    * through the registerTemplate method on the AMP runtime.
    * @param {string} type
-   * @param {!TemplateClassDef} templateClass
+   * @param {typeof BaseTemplate} templateClass
    * @private
    * @restricted
    */
@@ -435,7 +463,7 @@ export function installTemplatesService(win) {
  * through the registerTemplate method on the AMP runtime.
  * @param {!Window} win
  * @param {string} type
- * @param {!TemplateClassDef} templateClass
+ * @param {typeof BaseTemplate} templateClass
  * @return {undefined}
  */
 export function registerExtendedTemplate(win, type, templateClass) {
diff --git a/test/unit/preact/component/test-renderer.js b/test/unit/preact/component/test-renderer.js
new file mode 100644
index 000000000000..b88bf124ff1c
--- /dev/null
+++ b/test/unit/preact/component/test-renderer.js
@@ -0,0 +1,125 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as Preact from '../../../../src/preact/index';
+import {mount} from 'enzyme';
+import {useRenderer} from '../../../../src/preact/component';
+
+describes.sandboxed('useRenderer', {}, (env) => {
+  function Component({render, data}) {
+    const value = useRenderer(render, data);
+    return <div>{value}</div>;
+  }
+
+  it('should render a sync renderer', () => {
+    const render = env.sandbox.stub().callsFake((data) => data.value);
+    const data = {value: 'one'};
+    const props = {data, render};
+
+    const wrapper = mount(<Component {...props} />);
+    expect(wrapper.html()).to.equal('<div>one</div>');
+    expect(render).to.be.calledOnce.calledWith(data);
+
+    // Empty re-render with old data.
+    wrapper.setProps({...props, inc: 1});
+    expect(wrapper.html()).to.equal('<div>one</div>'); // no change.
+    expect(render).to.be.calledOnce; // no change.
+
+    // Re-render with new data.
+    wrapper.setProps({...props, data: {value: 'two'}});
+    expect(wrapper.html()).to.equal('<div>two</div>');
+    expect(render).to.be.calledTwice;
+  });
+
+  it('should render an async renderer', () => {
+    let renderCallback;
+    const render = env.sandbox.stub().callsFake((data) => ({
+      then(callback) {
+        renderCallback = () => callback(data.value);
+      },
+    }));
+    function resolve() {
+      renderCallback();
+      renderCallback = null;
+      wrapper.update();
+    }
+
+    const data = {value: 'one'};
+    const props = {data, render};
+
+    // First render: start.
+    const wrapper = mount(<Component {...props} />);
+    expect(wrapper.html()).to.equal('<div></div>');
+    expect(render).to.be.calledOnce.calledWith(data);
+
+    // First render: complete.
+    resolve();
+    expect(wrapper.html()).to.equal('<div>one</div>');
+    expect(render).to.be.calledOnce; // no change.
+
+    // Empty re-render with old data.
+    wrapper.setProps({...props, inc: 1});
+    expect(wrapper.html()).to.equal('<div>one</div>'); // no change.
+    expect(render).to.be.calledOnce; // no change.
+
+    // Re-render: start.
+    wrapper.setProps({...props, data: {value: 'two'}});
+    expect(wrapper.html()).to.equal('<div>one</div>'); // no change.
+    expect(render).to.be.calledTwice;
+
+    // Re-render: end.
+    resolve();
+    expect(wrapper.html()).to.equal('<div>two</div>');
+    expect(render).to.be.calledTwice;
+  });
+
+  it('should supersede an async renderer', () => {
+    const renderCallbacks = [];
+    const render = env.sandbox.stub().callsFake((data) => ({
+      then(callback) {
+        renderCallbacks.push(() => callback(data.value));
+      },
+    }));
+    function resolve(renderCallback) {
+      renderCallback();
+      renderCallback = null;
+      wrapper.update();
+    }
+
+    const data = {value: 'one'};
+    const props = {data, render};
+
+    // First render: start.
+    const wrapper = mount(<Component {...props} />);
+    expect(wrapper.html()).to.equal('<div></div>');
+    expect(render).to.be.calledOnce;
+
+    // Re-render: start.
+    wrapper.setProps({...props, data: {value: 'two'}});
+    expect(wrapper.html()).to.equal('<div></div>'); // no change.
+    expect(render).to.be.calledTwice;
+
+    // Re-render: end.
+    resolve(renderCallbacks[1]);
+    expect(wrapper.html()).to.equal('<div>two</div>');
+    expect(render).to.be.calledTwice;
+
+    // First render: end.
+    resolve(renderCallbacks[0]);
+    expect(wrapper.html()).to.equal('<div>two</div>');
+    expect(render).to.be.calledTwice; // no change.
+  });
+});
diff --git a/test/unit/preact/test-base-element.js b/test/unit/preact/test-base-element.js
index b09e3d181cc2..dbb69570f011 100644
--- a/test/unit/preact/test-base-element.js
+++ b/test/unit/preact/test-base-element.js
@@ -65,6 +65,131 @@ describes.realWin('PreactBaseElement', {amp: true}, (env) => {
     });
   }
 
+  describe('attribute mapping', () => {
+    const DATE_STRING = '2018-01-01T08:00:00Z';
+    const DATE = Date.parse(DATE_STRING);
+
+    let element;
+
+    beforeEach(async () => {
+      Impl['props'] = {
+        'noValue': {attr: 'no-value'},
+        'valueWithDef': {attr: 'value-with-def', default: 'DEFAULT'},
+        'propA': {attr: 'prop-a'},
+        'minFontSize': {attr: 'min-font-size', type: 'number'},
+        'aDate': {attr: 'a-date', type: 'date'},
+        'disabled': {attr: 'disabled', type: 'boolean'},
+        'enabled': {attr: 'enabled', type: 'boolean'},
+        'combined': {
+          attrs: ['part-a', 'part-b'],
+          parseAttrs: (e) =>
+            `${e.getAttribute('part-a')}+${e.getAttribute('part-b')}`,
+        },
+      };
+      element = html`
+        <amp-preact
+          layout="fixed"
+          width="100"
+          height="100"
+          prop-a="A"
+          min-font-size="72"
+          disabled
+          unknown="1"
+          part-a="A"
+          part-b="B"
+        >
+        </amp-preact>
+      `;
+      element.setAttribute('a-date', DATE_STRING);
+      doc.body.appendChild(element);
+      await element.build();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+    });
+
+    it('should render content inline', async () => {
+      expect(component).to.be.calledOnce;
+      expect(element.querySelector('#component')).to.be.ok;
+      expect(element.shadowRoot).to.not.be.ok;
+    });
+
+    it('should parse attributes on first render', async () => {
+      expect(component).to.be.calledOnce;
+      expect(lastProps).to.deep.equal({
+        valueWithDef: 'DEFAULT',
+        propA: 'A',
+        minFontSize: 72,
+        aDate: DATE,
+        disabled: true,
+        enabled: false,
+        combined: 'A+B',
+      });
+    });
+
+    it('should mutate attributes', async () => {
+      element.setAttribute('prop-a', 'B');
+      element.setAttribute('min-font-size', '72.5');
+      element.setAttribute('a-date', '2018-01-01T08:00:01Z');
+      element.setAttribute('enabled', '');
+      element.removeAttribute('disabled');
+      element.setAttribute('part-b', 'C');
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+
+      expect(component).to.be.calledTwice;
+      expect(lastProps).to.deep.equal({
+        valueWithDef: 'DEFAULT',
+        propA: 'B',
+        minFontSize: 72.5,
+        aDate: DATE + 1000,
+        disabled: false,
+        enabled: true,
+        combined: 'A+C',
+      });
+    });
+
+    it('should ignore non-declared attributes', async () => {
+      // Perform ignored mutations.
+      await waitForMutation(element, () => {
+        element.removeAttribute('unknown');
+        element.setAttribute('unknown2', '2');
+        element.style.background = 'red';
+        element.classList.add('class1');
+      });
+
+      // Execute a handled mutation and check that execution happened only
+      // twice.
+      element.setAttribute('prop-a', 'B');
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+      expect(lastProps).to.have.property('propA', 'B');
+      expect(lastProps).to.not.have.property('unknown2');
+    });
+  });
+
+  describe('usesTemplate', () => {
+    let element;
+
+    beforeEach(async () => {
+      Impl['usesTemplate'] = true;
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100"> </amp-preact>
+      `;
+      doc.body.appendChild(element);
+      await element.build();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+    });
+
+    it('should pick-up template attribute mutations', async () => {
+      element.setAttribute('template', 't1');
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+    });
+
+    it('should pick-up template child mutations', async () => {
+      element.appendChild(document.createElement('template'));
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+    });
+  });
+
   describe('shadow container rendering', () => {
     let element;
 
@@ -160,104 +285,86 @@ describes.realWin('PreactBaseElement', {amp: true}, (env) => {
     });
   });
 
-  describe('attribute mapping', () => {
-    const DATE_STRING = '2018-01-01T08:00:00Z';
-    const DATE = Date.parse(DATE_STRING);
-
+  describe('lightDom mapping', () => {
     let element;
+    let updateEventSpy;
 
-    beforeEach(async () => {
-      Impl['props'] = {
-        'noValue': {attr: 'no-value'},
-        'valueWithDef': {attr: 'value-with-def', default: 'DEFAULT'},
-        'propA': {attr: 'prop-a'},
-        'minFontSize': {attr: 'min-font-size', type: 'number'},
-        'aDate': {attr: 'a-date', type: 'date'},
-        'disabled': {attr: 'disabled', type: 'boolean'},
-        'enabled': {attr: 'enabled', type: 'boolean'},
-        'combined': {
-          attrs: ['part-a', 'part-b'],
-          parseAttrs: (e) =>
-            `${e.getAttribute('part-a')}+${e.getAttribute('part-b')}`,
-        },
-      };
+    beforeEach(() => {
+      Impl['lightDomTag'] = 'time';
+      component = env.sandbox.stub().callsFake((props) => {
+        lastProps = props;
+        return Preact.createElement(
+          'time',
+          {...props},
+          Preact.createElement('div', {
+            id: 'component',
+            'data-name': props.name,
+          })
+        );
+      });
+      Impl['Component'] = component;
       element = html`
-        <amp-preact
-          layout="fixed"
-          width="100"
-          height="100"
-          prop-a="A"
-          min-font-size="72"
-          disabled
-          unknown="1"
-          part-a="A"
-          part-b="B"
-        >
-        </amp-preact>
+        <amp-preact layout="fixed" width="100" height="100"> </amp-preact>
       `;
-      element.setAttribute('a-date', DATE_STRING);
-      doc.body.appendChild(element);
-      await element.build();
-      await waitFor(() => component.callCount > 0, 'component rendered');
-    });
 
-    it('should render content inline', async () => {
-      expect(component).to.be.calledOnce;
-      expect(element.querySelector('#component')).to.be.ok;
-      expect(element.shadowRoot).to.not.be.ok;
+      updateEventSpy = env.sandbox.stub();
+      element.addEventListener('amp:dom-update', updateEventSpy);
     });
 
-    it('should parse attributes on first render', async () => {
+    it('should render from scratch', async () => {
+      doc.body.appendChild(element);
+      await element.build();
+      await waitFor(
+        () => element.querySelector(':scope > time'),
+        'lightDom element created'
+      );
+      await waitFor(() => component.callCount > 0, 'component rendered');
       expect(component).to.be.calledOnce;
-      expect(lastProps).to.deep.equal({
-        valueWithDef: 'DEFAULT',
-        propA: 'A',
-        minFontSize: 72,
-        aDate: DATE,
-        disabled: true,
-        enabled: false,
-        combined: 'A+B',
-      });
+      const lightDom = element.querySelector(':scope > time');
+      expect(lightDom.className).to.equal('');
+      expect(lightDom.querySelector(':scope > #component')).to.be.ok;
+      expect(lastProps.as).to.equal('time');
+      await waitFor(
+        () => updateEventSpy.callCount > 0,
+        'amp:dom-update called'
+      );
     });
 
-    it('should mutate attributes', async () => {
-      element.setAttribute('prop-a', 'B');
-      element.setAttribute('min-font-size', '72.5');
-      element.setAttribute('a-date', '2018-01-01T08:00:01Z');
-      element.setAttribute('enabled', '');
-      element.removeAttribute('disabled');
-      element.setAttribute('part-b', 'C');
-
-      await waitFor(() => component.callCount > 1, 'component re-rendered');
-
-      expect(component).to.be.calledTwice;
-      expect(lastProps).to.deep.equal({
-        valueWithDef: 'DEFAULT',
-        propA: 'B',
-        minFontSize: 72.5,
-        aDate: DATE + 1000,
-        disabled: false,
-        enabled: true,
-        combined: 'A+C',
-      });
+    it('should add fill class', async () => {
+      Impl['layoutSizeDefined'] = true;
+      doc.body.appendChild(element);
+      await element.build();
+      await waitFor(
+        () => element.querySelector(':scope > time'),
+        'lightDom element created'
+      );
+      const lightDom = element.querySelector(':scope > time');
+      expect(lightDom.querySelector(':scope > #component')).to.be.ok;
+      expect(lightDom.className).to.equal('i-amphtml-fill-content');
+      expect(lastProps.className).to.equal('i-amphtml-fill-content');
+      expect(lastProps.as).to.equal('time');
+      await waitFor(
+        () => updateEventSpy.callCount > 0,
+        'amp:dom-update called'
+      );
     });
 
-    it('should ignore non-declared attributes', async () => {
-      // Perform ignored mutations.
-      await waitForMutation(element, () => {
-        element.removeAttribute('unknown');
-        element.setAttribute('unknown2', '2');
-        element.style.background = 'red';
-        element.classList.add('class1');
-      });
-
-      // Execute a handled mutation and check that execution happened only
-      // twice.
-      element.setAttribute('prop-a', 'B');
-      await waitFor(() => component.callCount > 1, 'component re-rendered');
-      expect(component).to.be.calledTwice;
-      expect(lastProps).to.have.property('propA', 'B');
-      expect(lastProps).to.not.have.property('unknown2');
+    it('should use the existing element if exists', async () => {
+      Impl['layoutSizeDefined'] = true;
+      const existing = document.createElement('time');
+      element.appendChild(existing);
+      doc.body.appendChild(element);
+      await element.build();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      expect(element.querySelector(':scope > time')).to.equal(existing);
+      expect(existing.querySelector(':scope > #component')).to.be.ok;
+      expect(existing.className).to.equal('i-amphtml-fill-content');
+      expect(lastProps.className).to.equal('i-amphtml-fill-content');
+      expect(lastProps.as).to.equal('time');
+      await waitFor(
+        () => updateEventSpy.callCount > 0,
+        'amp:dom-update called'
+      );
     });
   });
 
diff --git a/test/unit/test-template.js b/test/unit/test-template.js
index 4fdbef800889..f4c5cfa0b1b7 100644
--- a/test/unit/test-template.js
+++ b/test/unit/test-template.js
@@ -44,9 +44,12 @@ describes.realWin('Template', {amp: true}, (env) => {
   class TemplateImpl extends BaseTemplate {
     render(data) {
       const elem = doc.createElement('div');
-      elem.textContent = 'abc' + data.value;
+      elem.textContent = `abc${data.value}`;
       return elem;
     }
+    renderAsString(data) {
+      return `str(abc${data.value})`;
+    }
   }
 
   class TemplateImplCheckingViewer extends TemplateImpl {
@@ -82,6 +85,20 @@ describes.realWin('Template', {amp: true}, (env) => {
     });
   });
 
+  it('should render as string', () => {
+    const templateElement = createTemplateElement();
+    registerExtendedTemplate(
+      win,
+      templateElement.getAttribute('type'),
+      TemplateImpl
+    );
+    return templates
+      .renderTemplateAsString(templateElement, {value: 1})
+      .then((res) => {
+        expect(res).to.equal('str(abc1)');
+      });
+  });
+
   it('should render when detached', () => {
     const templateElement = createTemplateElement();
     // Use TemplateImplCheckingViewer to make sure viewerCanRenderTemplates
@@ -349,12 +366,6 @@ describes.realWin('BaseTemplate', {amp: true}, (env) => {
     doc.body.appendChild(templateElement);
   });
 
-  it('should require render override', () => {
-    expect(() => {
-      new BaseTemplate(templateElement).render();
-    }).to.throw(/Not implemented/);
-  });
-
   describe('tryUnwrap()', () => {
     it('should unwrap single element', () => {
       const root = doc.createElement('div');