diff --git a/examples/flights-app/app-header.sky b/examples/flights-app/app-header.sky
new file mode 100644
index 00000000000..529c67d98b6
--- /dev/null
+++ b/examples/flights-app/app-header.sky
@@ -0,0 +1,18 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      display: flex;
+      background: linear-gradient(#3E77B7, #6C98C4);
+      padding: 8px;
+      color: white;
+      border-bottom: 1px solid #3E77B7;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-header"
+});
+</script>
diff --git a/examples/flights-app/app-menu-button.sky b/examples/flights-app/app-menu-button.sky
new file mode 100644
index 00000000000..c63c3a4144e
--- /dev/null
+++ b/examples/flights-app/app-menu-button.sky
@@ -0,0 +1,19 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      display: flex;
+      border-radius: 4px;
+      justify-content: center;
+      align-items: center;
+      width: 30px;
+      height: 30px;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-menu-button"
+});
+</script>
diff --git a/examples/flights-app/app-panel-content.sky b/examples/flights-app/app-panel-content.sky
new file mode 100644
index 00000000000..9bc93309559
--- /dev/null
+++ b/examples/flights-app/app-panel-content.sky
@@ -0,0 +1,14 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      display: flex;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-panel-content"
+});
+</script>
diff --git a/examples/flights-app/app-panel-header.sky b/examples/flights-app/app-panel-header.sky
new file mode 100644
index 00000000000..11ab221b242
--- /dev/null
+++ b/examples/flights-app/app-panel-header.sky
@@ -0,0 +1,17 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      background-color: #DEDEDE;
+      padding: 8px;
+      display: flex;
+      align-items: center;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-panel-header"
+});
+</script>
diff --git a/examples/flights-app/app-panel.sky b/examples/flights-app/app-panel.sky
new file mode 100644
index 00000000000..ed9da6d1106
--- /dev/null
+++ b/examples/flights-app/app-panel.sky
@@ -0,0 +1,16 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      background-color: white;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-panel"
+});
+</script>
diff --git a/examples/flights-app/app-scrollable.sky b/examples/flights-app/app-scrollable.sky
new file mode 100644
index 00000000000..e9c1840e0ff
--- /dev/null
+++ b/examples/flights-app/app-scrollable.sky
@@ -0,0 +1,16 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      flex: 1;
+      box-shadow: inset 0px 0px 22px 2px rgba(22, 22, 22, 0.63);
+      overflow: scroll;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-scrollable"
+});
+</script>
diff --git a/examples/flights-app/app-search-input.sky b/examples/flights-app/app-search-input.sky
new file mode 100644
index 00000000000..4c91b510cab
--- /dev/null
+++ b/examples/flights-app/app-search-input.sky
@@ -0,0 +1,23 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      background-color: #F6F6F6;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      font-size: 1.2em;
+    }
+
+    .input-text {
+      margin-left: 8px;
+    }
+  </style>
+  <span class="input-icon"><t>&#128270;</t></span>
+  <span class="input-text"><t>flights today to dc by price</t></span>
+</template>
+<script>
+SkyElement({
+  name: "app-search-input"
+});
+</script>
diff --git a/examples/flights-app/app-title.sky b/examples/flights-app/app-title.sky
new file mode 100644
index 00000000000..8ad99d17d76
--- /dev/null
+++ b/examples/flights-app/app-title.sky
@@ -0,0 +1,18 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      font-size: 22px;
+      margin-left: 8px;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-title"
+});
+</script>
diff --git a/examples/flights-app/app-toast.sky b/examples/flights-app/app-toast.sky
new file mode 100644
index 00000000000..f04db163b48
--- /dev/null
+++ b/examples/flights-app/app-toast.sky
@@ -0,0 +1,36 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      position: absolute;
+      bottom: 32px;
+      right: 32px;
+      max-width: 55%;
+      box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4);
+      background-color: #b0281a;
+      background-image: linear-gradient(#E5D658, #DFCF43);
+      border: 1px solid #AEA477;
+      padding: 6px;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      font-size: 0.8em;
+    }
+
+    .header {
+      flex-shrink: 0;
+      margin-right: 6px;
+    }
+  </style>
+  <div class="header">
+    <content select=".toast-icon" />
+  </div>
+  <div class="content">
+    <content select=".toast-content" />
+  </div>
+</template>
+<script>
+SkyElement({
+  name: "app-toast"
+});
+</script>
diff --git a/examples/flights-app/app-toolbar.sky b/examples/flights-app/app-toolbar.sky
new file mode 100644
index 00000000000..b996f35103c
--- /dev/null
+++ b/examples/flights-app/app-toolbar.sky
@@ -0,0 +1,15 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      background-color: #F6F6F6;
+      padding: 0 8px;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-toolbar"
+});
+</script>
diff --git a/examples/flights-app/flights-app.sky b/examples/flights-app/flights-app.sky
new file mode 100644
index 00000000000..f4aac089b41
--- /dev/null
+++ b/examples/flights-app/flights-app.sky
@@ -0,0 +1,206 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<import src="app-header.sky" />
+<import src="app-title.sky" />
+<import src="app-menu-button.sky" />
+<import src="app-panel.sky" />
+<import src="app-panel-header.sky" />
+<import src="app-panel-content.sky" />
+<import src="app-toolbar.sky" />
+<import src="app-search-input.sky" />
+<import src="app-scrollable.sky" />
+<import src="app-toast.sky" />
+
+<template>
+  <style>
+    * { box-sizing: border-box; }
+
+    t, span {
+      display: inline;
+    }
+
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      background-color: #494949;
+      font-family: "Helvetica Neue", sans-serif;
+      font-size: 16px;
+      color: #2B2B2B;
+    }
+
+    .toast-icon {
+      font-weight: bold;
+      font-size: 24px;
+      border-radius: 16px;
+      width: 32px;
+      height: 32px;
+      border: 2px solid black;
+      line-height: 30px;
+      text-align: center;
+    }
+
+    .tip-price {
+      font-weight: bold;
+    }
+
+    .route-result {
+      margin: 16px 16px 0 16px;
+    }
+
+    .route-title {
+      flex: 1;
+    }
+
+    .airline {
+      border-radius: 2px;
+      align-items: center;
+      padding: 8px;
+    }
+
+    .airline-name {
+      flex: 1;
+    }
+
+    .airline-logo-image {
+      width: 50px;
+      flex-shrink: 0;
+    }
+
+    .airline-best-price {
+      color: #ABB4B6;
+    }
+
+    .airline-name,
+    .airline-best-price {
+      padding: 8px;
+    }
+
+    a {
+      text-decoration: none;
+      color: #1155CC;
+    }
+  </style>
+  <app-header>
+    <app-title>
+      <t>Search</t>
+    </app-title>
+    <app-menu-button>
+      <img src="../flights/images/menu-white.png" style="width: 18px" />
+    </app-menu-button>
+  </app-header>
+  <app-toolbar>
+    <app-search-input />
+  </app-toolbar>
+  <app-scrollable>
+    <app-panel class="route-result">
+      <app-panel-header>
+        <div class="route-title">
+          <t>SFO to DCA</t>
+        </div>
+        <app-menu-button>
+          <img src="../flights/images/menu-enabled.png" style="width: 14px" />
+        </app-menu-button>
+      </app-panel-header>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="../flights/images/virgin-america.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>Virgin America</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$800</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="../flights/images/ba.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>British Airways</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$700</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="../flights/images/united.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>United</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$667</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="../flights/images/delta.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>Delta</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$450</a></t>
+        </div>
+      </app-panel-content>
+    </app-panel>
+    <app-panel class="route-result">
+      <app-panel-header>
+        <div class="route-title">
+          <t>SJC to DCA</t>
+        </div>
+        <app-menu-button>
+          <img src="../flights/images/menu-enabled.png" style="width: 14px" />
+        </app-menu-button>
+      </app-panel-header>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="../flights/images/virgin-america.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>Virgin America</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$1500</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="../flights/images/jetblue.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>jetBlue</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$650</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="../flights/images/united.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>United</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$367</a></t>
+        </div>
+      </app-panel-content>
+    </app-panel>
+  </app-scrollable>
+  <app-toast>
+    <div class="toast-icon">
+      <t>?</t>
+    </div>
+    <div class="toast-content">
+      <t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t>
+    </div>
+  </app-toast>
+</template>
+<script>
+SkyElement({
+  name: "flights-app",
+});
+</script>
diff --git a/examples/flights-app/index.sky b/examples/flights-app/index.sky
new file mode 100644
index 00000000000..7aa09b339f2
--- /dev/null
+++ b/examples/flights-app/index.sky
@@ -0,0 +1,15 @@
+<sky>
+  <import src="flights-app.sky" />
+  <style>
+    sky {
+      height: 100%;
+    }
+  </style>
+  <script>
+    // TODO(esprehn): Work around a bug where having <flights-app /> in the
+    // page doesn't render anything until the first input event.
+    addEventListener("load", function() {
+      document.querySelector("sky").appendChild(document.createElement("flights-app"));
+    });
+  </script>
+</sky>
diff --git a/tests/framework/flights-app-expected.txt b/tests/framework/flights-app-expected.txt
new file mode 100644
index 00000000000..9861712fca9
--- /dev/null
+++ b/tests/framework/flights-app-expected.txt
@@ -0,0 +1,160 @@
+layer at (0,0) size 800x600
+  RenderView {#document} at (0,0) size 800x600
+layer at (0,0) size 800x563
+  RenderBlock {sky} at (0,0) size 800x563
+    RenderFlexibleBox {flights-app} at (0,0) size 800x563 [color=#2B2B2B] [bgcolor=#494949]
+      RenderFlexibleBox {app-header} at (0,0) size 800x47 [color=#FFFFFF] [border: none (1px solid #3E77B7) none]
+        RenderFlexibleBox {app-title} at (16,8) size 746x30
+          RenderBlock {t} at (0,2.50) size 76.08x25
+            RenderText {#text} at (0,0) size 77x25
+              text run at (0,0) width 77: "Search"
+        RenderFlexibleBox {app-menu-button} at (762,8) size 30x30
+          RenderImage {img} at (6,15) size 18x0
+      RenderBlock {app-toolbar} at (0,47) size 800x35 [bgcolor=#F6F6F6]
+        RenderFlexibleBox {app-search-input} at (8,0) size 784x35
+          RenderBlock {span} at (4,4) size 24.36x27
+            RenderBlock {t} at (0,0) size 24.36x27
+              RenderText {#text} at (0,3) size 25x23
+                text run at (0,3) width 25: "\x{D83D}\x{DD0E}"
+          RenderBlock {span} at (36.36,6) size 257.61x23
+            RenderBlock {t} at (0,0) size 257.61x23
+              RenderText {#text} at (0,0) size 258x23
+                text run at (0,0) width 258: "flights today to dc by price"
+layer at (0,82) size 800x481
+  RenderBlock {app-scrollable} at (0,82) size 800x481
+    RenderFlexibleBox {app-panel} at (16,16) size 768x250 [bgcolor=#FFFFFF]
+      RenderFlexibleBox {app-panel-header} at (0,0) size 768x46 [bgcolor=#DEDEDE]
+        RenderBlock {div} at (8,13.50) size 722x19
+          RenderInline {t} at (0,0) size 93x19
+            RenderText {#text} at (0,0) size 93x19
+              text run at (0,0) width 93: "SFO to DCA"
+          RenderText {#text} at (0,0) size 0x0
+        RenderFlexibleBox {app-menu-button} at (730,8) size 30x30
+          RenderImage {img} at (8,15) size 14x0
+      RenderFlexibleBox {app-panel-content} at (0,46) size 768x51
+        RenderBlock {div} at (8,25.50) size 50x0
+          RenderImage {img} at (0,0) size 50x0
+        RenderBlock {div} at (58,8) size 645.28x35
+          RenderInline {t} at (0,0) size 118x19
+            RenderText {#text} at (8,8) size 118x19
+              text run at (8,8) width 118: "Virgin America"
+          RenderText {#text} at (0,0) size 0x0
+        RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
+          RenderInline {t} at (0,0) size 41x19
+            RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
+              RenderText {#text} at (8,8) size 41x19
+                text run at (8,8) width 41: "$800"
+          RenderText {#text} at (0,0) size 0x0
+      RenderFlexibleBox {app-panel-content} at (0,97) size 768x51
+        RenderBlock {div} at (8,25.50) size 50x0
+          RenderImage {img} at (0,0) size 50x0
+        RenderBlock {div} at (58,8) size 645.28x35
+          RenderInline {t} at (0,0) size 119x19
+            RenderText {#text} at (8,8) size 119x19
+              text run at (8,8) width 119: "British Airways"
+          RenderText {#text} at (0,0) size 0x0
+        RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
+          RenderInline {t} at (0,0) size 41x19
+            RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
+              RenderText {#text} at (8,8) size 41x19
+                text run at (8,8) width 41: "$700"
+          RenderText {#text} at (0,0) size 0x0
+      RenderFlexibleBox {app-panel-content} at (0,148) size 768x51
+        RenderBlock {div} at (8,25.50) size 50x0
+          RenderImage {img} at (0,0) size 50x0
+        RenderBlock {div} at (58,8) size 645.28x35
+          RenderInline {t} at (0,0) size 53x19
+            RenderText {#text} at (8,8) size 53x19
+              text run at (8,8) width 53: "United"
+          RenderText {#text} at (0,0) size 0x0
+        RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
+          RenderInline {t} at (0,0) size 41x19
+            RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
+              RenderText {#text} at (8,8) size 41x19
+                text run at (8,8) width 41: "$667"
+          RenderText {#text} at (0,0) size 0x0
+      RenderFlexibleBox {app-panel-content} at (0,199) size 768x51
+        RenderBlock {div} at (8,25.50) size 50x0
+          RenderImage {img} at (0,0) size 50x0
+        RenderBlock {div} at (58,8) size 645.28x35
+          RenderInline {t} at (0,0) size 43x19
+            RenderText {#text} at (8,8) size 43x19
+              text run at (8,8) width 43: "Delta"
+          RenderText {#text} at (0,0) size 0x0
+        RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
+          RenderInline {t} at (0,0) size 41x19
+            RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
+              RenderText {#text} at (8,8) size 41x19
+                text run at (8,8) width 41: "$450"
+          RenderText {#text} at (0,0) size 0x0
+    RenderFlexibleBox {app-panel} at (16,282) size 768x199 [bgcolor=#FFFFFF]
+      RenderFlexibleBox {app-panel-header} at (0,0) size 768x46 [bgcolor=#DEDEDE]
+        RenderBlock {div} at (8,13.50) size 722x19
+          RenderInline {t} at (0,0) size 87x19
+            RenderText {#text} at (0,0) size 87x19
+              text run at (0,0) width 87: "SJC to DCA"
+          RenderText {#text} at (0,0) size 0x0
+        RenderFlexibleBox {app-menu-button} at (730,8) size 30x30
+          RenderImage {img} at (8,15) size 14x0
+      RenderFlexibleBox {app-panel-content} at (0,46) size 768x51
+        RenderBlock {div} at (8,25.50) size 50x0
+          RenderImage {img} at (0,0) size 50x0
+        RenderBlock {div} at (58,8) size 635.09x35
+          RenderInline {t} at (0,0) size 118x19
+            RenderText {#text} at (8,8) size 118x19
+              text run at (8,8) width 118: "Virgin America"
+          RenderText {#text} at (0,0) size 0x0
+        RenderBlock {div} at (693.09,8) size 66.91x35 [color=#ABB4B6]
+          RenderInline {t} at (0,0) size 51x19
+            RenderInline {a} at (0,0) size 51x19 [color=#1155CC]
+              RenderText {#text} at (8,8) size 51x19
+                text run at (8,8) width 51: "$1500"
+          RenderText {#text} at (0,0) size 0x0
+      RenderFlexibleBox {app-panel-content} at (0,97) size 768x51
+        RenderBlock {div} at (8,25.50) size 50x0
+          RenderImage {img} at (0,0) size 50x0
+        RenderBlock {div} at (58,8) size 645.28x35
+          RenderInline {t} at (0,0) size 56x19
+            RenderText {#text} at (8,8) size 56x19
+              text run at (8,8) width 56: "jetBlue"
+          RenderText {#text} at (0,0) size 0x0
+        RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
+          RenderInline {t} at (0,0) size 41x19
+            RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
+              RenderText {#text} at (8,8) size 41x19
+                text run at (8,8) width 41: "$650"
+          RenderText {#text} at (0,0) size 0x0
+      RenderFlexibleBox {app-panel-content} at (0,148) size 768x51
+        RenderBlock {div} at (8,25.50) size 50x0
+          RenderImage {img} at (0,0) size 50x0
+        RenderBlock {div} at (58,8) size 645.28x35
+          RenderInline {t} at (0,0) size 53x19
+            RenderText {#text} at (8,8) size 53x19
+              text run at (8,8) width 53: "United"
+          RenderText {#text} at (0,0) size 0x0
+        RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
+          RenderInline {t} at (0,0) size 41x19
+            RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
+              RenderText {#text} at (8,8) size 41x19
+                text run at (8,8) width 41: "$367"
+          RenderText {#text} at (0,0) size 0x0
+layer at (483,522) size 285x46
+  RenderFlexibleBox {app-toast} at (482.59,522) size 285.41x46 [bgcolor=#B0281A] [border: (1px solid #AEA477)]
+    RenderBlock {div} at (7,7) size 32x32
+      RenderBlock {div} at (0,0) size 32x32 [border: (2px solid #000000)]
+        RenderInline {t} at (0,0) size 14x28
+          RenderText {#text} at (9,3) size 14x28
+            text run at (9,3) width 14: "?"
+        RenderText {#text} at (0,0) size 0x0
+    RenderBlock {div} at (45,15.50) size 233.41x15
+      RenderBlock {div} at (0,0) size 233.41x15
+        RenderInline {t} at (0,0) size 234x15
+          RenderText {#text} at (0,0) size 72x15
+            text run at (0,0) width 72: "Flights are "
+          RenderInline {span} at (0,0) size 37x15
+            RenderText {#text} at (71,0) size 37x15
+              text run at (71,0) width 37: "$200"
+          RenderText {#text} at (107,0) size 127x15
+            text run at (107,0) width 127: " cheaper tomorrow."
+        RenderText {#text} at (0,0) size 0x0
+
diff --git a/tests/framework/flights-app.sky b/tests/framework/flights-app.sky
new file mode 100644
index 00000000000..e42ff36e275
--- /dev/null
+++ b/tests/framework/flights-app.sky
@@ -0,0 +1,10 @@
+<sky>
+  <import src="/sky/examples/flights-app/flights-app.sky" />
+  <script>
+  addEventListener("load", function() {
+    var app = document.createElement("flights-app");
+    document.querySelector("sky").appendChild(app);
+    internals.notifyTestComplete(internals.renderTreeAsText());
+  });
+  </script>
+</sky>