diff --git a/perf/modules/query-summary-sk/index.js b/perf/modules/query-summary-sk/index.js
new file mode 100644
index 0000000..f972f7d
--- /dev/null
+++ b/perf/modules/query-summary-sk/index.js
@@ -0,0 +1,2 @@
+import './query-summary-sk.js'
+import './query-summary-sk.scss'
diff --git a/perf/modules/query-summary-sk/query-summary-sk-demo.html b/perf/modules/query-summary-sk/query-summary-sk-demo.html
new file mode 100644
index 0000000..2c0763a
--- /dev/null
+++ b/perf/modules/query-summary-sk/query-summary-sk-demo.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>query-summary-sk</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <h2>Without URL</h2>
+  <query-summary-sk selection='config=565&config=8888'></query-summary-sk>
+  <h2>With URL</h2>
+  <query-summary-sk url=/ selection='config=565&config=8888'></query-summary-sk>
+  <h3>Change</h3>
+  <button>Set</button>
+  <script type="text/javascript" charset="utf-8">
+    document.querySelector('button').addEventListener('click', (e) => {
+      document.querySelectorAll('query-summary-sk').forEach((ele) => {
+        ele.selection = 'type=GPU&config=8888';
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/perf/modules/query-summary-sk/query-summary-sk-demo.js b/perf/modules/query-summary-sk/query-summary-sk-demo.js
new file mode 100644
index 0000000..1c51332
--- /dev/null
+++ b/perf/modules/query-summary-sk/query-summary-sk-demo.js
@@ -0,0 +1 @@
+import './index.js'
diff --git a/perf/modules/query-summary-sk/query-summary-sk.js b/perf/modules/query-summary-sk/query-summary-sk.js
new file mode 100644
index 0000000..27004b3
--- /dev/null
+++ b/perf/modules/query-summary-sk/query-summary-sk.js
@@ -0,0 +1,66 @@
+/**
+ * @module modules/query-summary-sk
+ * @description <h2><code>query-summary-sk</code></h2>
+ *
+ * Displays a summary of a selection made using query-sk.
+ *
+ * @attr {string} url - If supplied, the displayed summary will be a link to the given URL.
+ *
+ * @attr {string} selection - A query-sk selection formatted as query parameters to be displayed.
+ *
+ */
+import { ElementSk } from '../../../infra-sk/modules/ElementSk'
+import { html, render } from 'lit-html'
+import { toParamSet } from 'common-sk/modules/query'
+
+const template = (ele) => {
+  if (ele.url) {
+    return html`<a href=${ele.url}><pre>${ele._display()}</pre></a>`;
+  } else {
+    return html`<pre>${ele._display()}</pre>`;
+  }
+}
+
+window.customElements.define('query-summary-sk', class extends ElementSk {
+  constructor() {
+    super(template);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._render();
+  }
+
+  _display() {
+    if (!this.selection) {
+      return '[No filters applied]';
+    }
+    const params = toParamSet(this.selection);
+    const keys = Object.keys(params);
+    keys.sort();
+    const ret = [];
+    keys.forEach((key) => {
+      params[key].forEach((value) => {
+        ret.push(`${key}=${value}`);
+      });
+    });
+    return ret.join('\n');
+  }
+
+  static get observedAttributes() {
+    return ['url', 'selection'];
+  }
+
+  /** @prop url {string} Mirrors the 'url' attribute. */
+  get url() { return this.getAttribute('url'); }
+  set url(val) { this.setAttribute('url', val); }
+
+  /** @prop selection {string} Mirrors the 'selection' attribute. */
+  get selection() { return this.getAttribute('selection'); }
+  set selection(val) { this.setAttribute('selection', val); }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._render();
+  }
+
+});
diff --git a/perf/modules/query-summary-sk/query-summary-sk.scss b/perf/modules/query-summary-sk/query-summary-sk.scss
new file mode 100644
index 0000000..f86a43b
--- /dev/null
+++ b/perf/modules/query-summary-sk/query-summary-sk.scss
@@ -0,0 +1,11 @@
+@import '~elements-sk/colors';
+
+query-summary-sk,
+query-summary-sk a {
+  max-width: 30em;
+  overflow: auto;
+  color: var(--blue);
+  font-weight: bold;
+  word-wrap: break-word;
+  vertical-align: middle;
+}
diff --git a/perf/pages/main.js b/perf/pages/main.js
index ce20a26..905b098 100644
--- a/perf/pages/main.js
+++ b/perf/pages/main.js
@@ -13,6 +13,8 @@
 import '../modules/day-range-sk'
 import '../modules/json-source-sk'
 import '../modules/plot-simple-sk'
+import '../modules/query-count-sk'
+import '../modules/query-summary-sk'
 import '../modules/query-values-sk'
 import '../modules/triage-status-sk'
 import '../modules/triage2-sk'
diff --git a/perf/res/imp/alerts-page.html b/perf/res/imp/alerts-page.html
index 97d2807..2e135be 100644
--- a/perf/res/imp/alerts-page.html
+++ b/perf/res/imp/alerts-page.html
@@ -21,8 +21,6 @@
 <link rel="import" href="/res/imp/bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
 <link rel="import" href="/res/imp/bower_components/paper-fab/paper-fab.html">
 
-<link rel="import" href="/res/common/imp/query-summary-sk.html" />
-
 <link rel="import" href="/res/imp/alert-config.html" />
 
 <dom-module id="alerts-page-sk">
@@ -92,7 +90,7 @@
         <tr>
           <td><iron-icon title="Edit" icon="create" on-tap="_edit" __config="{{item}}"></iron-icon></td>
           <td>{{item.display_name}}</td>
-          <td><query-summary-sk selection="{{item.query}}"></query-summary-sk></td>
+          <td><query-summary-sk selection="[[item.query]]"></query-summary-sk></td>
           <td>{{item.alert}}</td>
           <td>{{item.owner}}</td>
           <td><iron-icon title="Delete" icon="delete" on-tap="_delete" __config="{{item}}"></iron-icon></td>
diff --git a/perf/res/imp/cluster-page.html b/perf/res/imp/cluster-page.html
index 59eb38f..554ecae 100644
--- a/perf/res/imp/cluster-page.html
+++ b/perf/res/imp/cluster-page.html
@@ -20,7 +20,6 @@
 
 <link rel="import" href="/res/common/imp/details-summary.html">
 <link rel="import" href="/res/common/imp/query2-sk.html" />
-<link rel="import" href="/res/common/imp/query-summary-sk.html" />
 <link rel="import" href="/res/common/imp/sort.html" />
 <link rel="stylesheet" href="/res/common/css/md.css">
 
diff --git a/perf/res/imp/explore.html b/perf/res/imp/explore.html
index 53fc14b..d41da08 100644
--- a/perf/res/imp/explore.html
+++ b/perf/res/imp/explore.html
@@ -22,7 +22,6 @@
 
 <link rel="import" href="/res/common/imp/query2-sk.html" />
 <link rel="import" href="/res/common/imp/paramset.html" />
-<link rel="import" href="/res/common/imp/query-summary-sk.html" />
 <link rel="stylesheet" href="/res/common/css/md.css">
 
 <dom-module id="explore-sk">
diff --git a/perf/res/imp/triage-page.html b/perf/res/imp/triage-page.html
index 0f5ab5b..c24f848 100644
--- a/perf/res/imp/triage-page.html
+++ b/perf/res/imp/triage-page.html
@@ -17,7 +17,6 @@
 <link rel="import" href="/res/imp/bower_components/iron-selector/iron-selector.html">
 <link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
 
-<link rel="import" href="/res/common/imp/query-summary-sk.html" />
 <link rel="import" href="/res/common/imp/details-summary.html" />
 
 <dom-module id="triage-page-sk">
diff --git a/res/imp/query-chooser.html b/res/imp/query-chooser.html
index 891dc83..aa2c403 100644
--- a/res/imp/query-chooser.html
+++ b/res/imp/query-chooser.html
@@ -15,7 +15,6 @@
 -->
 <link rel="stylesheet" href="/res/common/css/md.css">
 <link rel=import href="query.html">
-<link rel=import href="query-summary-sk.html">
 
 <dom-module id="query-chooser-sk">
   <style>
diff --git a/res/imp/query-summary-sk-demo.html b/res/imp/query-summary-sk-demo.html
deleted file mode 100644
index 39f1300..0000000
--- a/res/imp/query-summary-sk-demo.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<html>
-<head>
-  <title>query-summary-sk demo</title>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-  <script src="/res/common/js/common.js"></script>
-  <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel=import href="/res/imp/bower_components/polymer/polymer.html">
-  <link rel=import href="query-summary-sk.html">
-</head>
-<body>
-  <h1>Query Summary</h1>
-
-  <query-summary-sk id=summary url="#foo"></query-summary-sk>
-
-  <query-summary-sk id=summary2></query-summary-sk>
-
-  <script type="text/javascript" charset="utf-8">
-    var paramset = {
-        "config": ["565", "8888"],
-        "type": ["CPU", "GPU"],
-        "units": ["ms", "bytes"],
-        "test": [
-          "DeferredSurfaceCopy_discardable",
-          "DeferredSurfaceCopy_nonDiscardable",
-          "GLInstancedArraysBench_instance",
-          "GLInstancedArraysBench_one_0",
-          "GLInstancedArraysBench_one_1",
-          "GLInstancedArraysBench_one_2",
-          "GLInstancedArraysBench_one_4",
-          "GLInstancedArraysBench_one_8",
-          "GLInstancedArraysBench_two_0",
-          "GLInstancedArraysBench_two_1",
-          "GLInstancedArraysBench_two_2",
-          "GLInstancedArraysBench_two_4",
-          "GLInstancedArraysBench_two_8",
-          "GLVec4ScalarBench_scalar_1_stage",
-          "GLVec4ScalarBench_scalar_2_stage",
-                                    ],
-      };
-    $$$('#summary').selection = sk.query.fromParamSet(paramset);
-    $$$('#summary2').selection = sk.query.fromParamSet(paramset);
-  </script>
-</body>
-</html>
diff --git a/res/imp/query-summary-sk.html b/res/imp/query-summary-sk.html
deleted file mode 100644
index 9200fae..0000000
--- a/res/imp/query-summary-sk.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!-- The <query-summary-sk> custom element declaration.
-
-  Displays a summary of a selection made using query-sk.
-
-  Attributes:
-    url - If supplied, the displayed summary will be a link to the given URL.
-
-    selection - A query-sk selection formatted as query parameters to be
-      displayed.
-  Events:
-    None.
-
-  Methods:
-    None.
--->
-<dom-module id="query-summary-sk">
-  <style>
-    #query,
-    a[href] {
-      max-width: 30em;
-      overflow: auto;
-      color: #1f78b4;
-      font-weight: bold;
-      word-wrap: break-word;
-      vertical-align: middle;
-    }
-  </style>
-  <template>
-    <pre id=query><template is="dom-if" if="{{url}}"><a href="{{url}}">{{_display(selection)}}</a></template><template is="dom-if" if="{{!url}}">{{_display(selection)}}</template></pre>
-  </template>
-</dom-module>
-
-<script>
-  Polymer({
-    is: "query-summary-sk",
-
-    properties: {
-      url: {
-        type: String,
-        value: "",
-        reflectToAttribute: true,
-      },
-      selection: {
-        type: String,
-        value: "",
-        reflectToAttribute: true,
-      },
-    },
-
-    _display: function(s) {
-      if (!s) {
-        return "[No filters applied]";
-      }
-      var p = sk.query.toParamSet(s);
-      var keys = Object.keys(p);
-      keys.sort();
-      var ret = [];
-      keys.forEach(function(key) {
-        p[key].forEach(function(value) {
-          ret.push(key + "=" + value);
-        });
-      });
-      return ret.join("\n");
-    },
-  });
-</script>
diff --git a/res/imp/query2-chooser.html b/res/imp/query2-chooser.html
index 558d867..3913bd2 100644
--- a/res/imp/query2-chooser.html
+++ b/res/imp/query2-chooser.html
@@ -23,7 +23,6 @@
 
 <link rel=import href="query2-sk.html">
 <link rel=import href="query2-count.html">
-<link rel=import href="query-summary-sk.html">
 
 <dom-module id="query2-chooser-sk">
   <style include="iron-flex iron-flex-alignment iron-positioning">
@@ -63,7 +62,7 @@
   <template>
     <div class="horizontal layout center">
       <button on-tap="_editTap" class=raised>Edit</button>
-      <query-summary-sk id=summary selection="{{current_query}}"></query-summary-sk>
+      <query-summary-sk id=summary selection="[[current_query]]"></query-summary-sk>
     </div>
     <div id="dialog">
       <query2-sk current_query="{{current_query}}" id=query></query2-sk>
diff --git a/res/imp/query2-sk-demo.html b/res/imp/query2-sk-demo.html
index 0306f09..6212194 100644
--- a/res/imp/query2-sk-demo.html
+++ b/res/imp/query2-sk-demo.html
@@ -7,7 +7,6 @@
   <script src="/res/common/js/common.js"></script>
   <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
   <link rel=import href="query2-sk.html">
-  <link rel=import href="query-summary-sk.html">
 </head>
 <body>
   <h1>Query2</h1>
diff --git a/res/imp/query2-values-sk-demo.html b/res/imp/query2-values-sk-demo.html
index e6088f7..b6ec3f7 100644
--- a/res/imp/query2-values-sk-demo.html
+++ b/res/imp/query2-values-sk-demo.html
@@ -7,7 +7,6 @@
   <script src="/res/common/js/common.js"></script>
   <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
   <link rel=import href="query2-sk.html">
-  <link rel=import href="query-summary-sk.html">
   <style type="text/css" media="screen">
     query2-values-sk {
       display: block;