From fc93949b72cfcdd10a5effcf085a39427b8dca09 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Fri, 15 May 2020 12:05:47 -0700
Subject: [PATCH 01/13] Emit <template shadowroot> when rendering an element
 with shadowRoot

---
 src/lib/lit-element-renderer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/lit-element-renderer.ts b/src/lib/lit-element-renderer.ts
index 5377fed..9627ed9 100644
--- a/src/lib/lit-element-renderer.ts
+++ b/src/lib/lit-element-renderer.ts
@@ -37,9 +37,9 @@ export class LitElementRenderer implements ElementRenderer {
     if (renderInfo.flattened) {
       yield* render(renderResult, childRenderer, renderInfo.flattened);
     } else {
-      yield '<shadow-root>';
+      yield '<template shadowroot="open">';
       yield* render(renderResult, childRenderer, renderInfo.flattened);
-      yield '</shadow-root>';
+      yield '</template>';
     }
   }
 

From 96b0c41aa26d1bfa935f6f268037cca2198c4c25 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Fri, 15 May 2020 12:07:15 -0700
Subject: [PATCH 02/13] set attributes into custom elements elements

---
 src/lib/render-lit-html.ts | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/render-lit-html.ts b/src/lib/render-lit-html.ts
index 3d91e54..058584d 100644
--- a/src/lib/render-lit-html.ts
+++ b/src/lib/render-lit-html.ts
@@ -125,6 +125,13 @@ declare global {
   }
 }
 
+const setAttributeToElement = (element: LitElement, name: string,
+    value: unknown) => {
+  if (element.attributeChangedCallback) {
+    element.attributeChangedCallback(name, null, value as string);
+  }
+}
+
 /**
  * Returns the scoped style sheets required by all elements currently defined.
  */
@@ -224,7 +231,7 @@ export async function* renderTemplateResult(
   /* The next value in result.values to render */
   let partIndex = 0;
 
-  /* 
+  /*
     The the template part index, which is different from the part index as
     multiple-binding attribute expressions are combined into one template part.
    */
@@ -397,14 +404,21 @@ export async function* renderTemplateResult(
               }
               const value = result.values[partIndex++];
               if (value) {
+                if (instance !== undefined) {
+                  setAttributeToElement(instance, attributeName, value);
+                }
                 yield attributeName;
               }
             } else {
               let attributeString = `${attributeName}="`;
               // attr.value has the raw attribute value, which may contain multiple
               // bindings. Replace the markers with their resolved values.
-              attributeString += getAttrValue(attr, result, partIndex);
+              const value = getAttrValue(attr, result, partIndex);
+              attributeString += value;
               partIndex += statics.length - 1;
+              if (instance !== undefined) {
+                setAttributeToElement(instance, attributeName, value);
+              }
               yield attributeString + '"';
             }
             skipTo(attrEndOffset);

From 7b84792e991b001195aed6d5d3e609df5f0c1aa5 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Fri, 15 May 2020 12:08:19 -0700
Subject: [PATCH 03/13] Update demo custom element rendering

---
 src/demo/app-client.ts | 12 +++++-----
 src/demo/app-server.ts | 16 +++++++++----
 src/demo/module.ts     | 54 +++++++++++++++++++++++++++++++++++-------
 src/demo/server.ts     | 12 +++-------
 4 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/src/demo/app-client.ts b/src/demo/app-client.ts
index 9a33041..37f38a3 100644
--- a/src/demo/app-client.ts
+++ b/src/demo/app-client.ts
@@ -4,25 +4,25 @@
 
 import {render} from 'lit-html';
 import {hydrate} from 'lit-html/lib/hydrate.js';
-import {template} from './module.js';
+import {template, initialData} from './module.js';
 
 declare var window: any;
 
-console.log('hydrating');
+console.log('Page hydrating with same data as rendered with SSR.');
 // The hydrate() function is run with the same data as used in the server
 // render. It doesn't update the DOM, and just updates the lit-html part values
 // so that future renders() will do the minimal DOM updates.
 hydrate(
-  template('SSR', 'This is a test.', ['foo', 'bar', 'qux']),
+  template(initialData),
   window.document.body
 );
 
 window.setTimeout(() => {
-  console.log('updating');
+  console.log('Page updating with new data...');
   // The first call to render() can use new data, and will only update the DOM
   // where this data differs from that passed to hydrate().
   render(
-    template('Hydration', 'This is a test.', ['hy', 'dra', 'ted']),
+    template({name: 'Hydration', message: 'We have now been hydrated and updated with new data.', items: ['hy', 'dra', 'ted'], prop: 'prop-updated', attr: 'attr-updated'}),
     window.document.body
   );
-}, 0);
+}, 500);
diff --git a/src/demo/app-server.ts b/src/demo/app-server.ts
index 47c8d41..52f8424 100644
--- a/src/demo/app-server.ts
+++ b/src/demo/app-server.ts
@@ -2,8 +2,12 @@
  * This is a server-old module that renders the HTML file shell.
  */
 
-import {render, getScopedStyles} from '../lib/render-lit-html.js';
-import {template} from './module.js';
+import {render} from '../lib/render-lit-html.js';
+import {template, initialData} from './module.js';
+
+export function renderAppWithInitialData() {
+  return renderApp(initialData);
+}
 
 // This module runs in the app context with the client-side code, but is a
 // server-only module. It doesn't use lit-html so that it can render the HTML
@@ -23,9 +27,11 @@ export async function* renderApp(data: any) {
             import('/demo/app-client.js');
           });
         </script>
+        <script type="module">
+          import {hydrateShadowRoots} from './node_modules/template-shadowroot/template-shadowroot.js';
+          hydrateShadowRoots(document.body);
+        </script>
         `;
-  yield* getScopedStyles();
-
   yield `
       </head>
       <body>
@@ -34,7 +40,7 @@ export async function* renderApp(data: any) {
 
   // Call the SSR render() function to render a client/server shared template.
   yield* render(
-    template(data.name, data.message, data.items),
+    template(data),
     undefined,
     false
   );
diff --git a/src/demo/module.ts b/src/demo/module.ts
index d18deb7..c17da11 100644
--- a/src/demo/module.ts
+++ b/src/demo/module.ts
@@ -4,12 +4,49 @@
 
 import {html} from 'lit-html';
 import {LitElement} from 'lit-element';
-import {repeat} from 'lit-html/directives/repeat.js';
+//import {repeat} from 'lit-html/directives/repeat.js';
+
+export const initialData = {
+  name: 'SSR',
+  message: 'This is a test.',
+  items: ['foo', 'bar', 'qux'],
+  prop: 'prop-value',
+  attr: 'attr-value'
+};
 
 export class MyElement extends LitElement {
+
+  static get properties() {
+    return {
+      prop: {type: String},
+      attr: {type: String}
+    }
+  }
+
+  prop = 'initial-prop';
+  attr = 'initial-attr';
+
   render() {
     return html`
-      <h2>I'm a my-element</h2>
+      <style>
+        :host {
+          display: inline-block;
+          border: 1px dashed gray;
+          margin: 4px;
+          padding: 4px;
+        }
+
+        :host > * {
+          padding: 4px;
+        }
+
+        header {
+          font-weight: bold;
+        }
+      </style>
+      <header>I'm a my-element!</header>
+      <div><i>this.prop</i>: ${this.prop}</div>
+      <div><i>this.attr</i>: ${this.attr}</div>
     `;
   }
 }
@@ -20,19 +57,20 @@ export const header = (name: string) =>
     <h1>Hello ${name}!</h1>
   `;
 
-export const template = (name: string, message: string, items: Array<string>) =>
+export const template = (data: {name: string, message: string, items: Array<string>, prop: string, attr: string}) =>
   html`
-    ${header(name)}
-    <p>${message}</p>
+    ${header(data.name)}
+    <p>${data.message}</p>
     <h4>repeating:</h4>
     <div>
-      ${repeat(
-        items,
+      ${data.items.map(
         (item, i) =>
           html`
             <p>${i}) ${item}</p>
           `
       )}
     </div>
-    <my-element></my-element>
+    ${Array(3).fill(1).map((_item, i) => html`
+      <my-element .prop=${`${data.prop}: ${i}`} attr=${`${data.attr}: ${i}`}></my-element>
+    `)}
   `;
diff --git a/src/demo/server.ts b/src/demo/server.ts
index 99dc152..00b9ef2 100644
--- a/src/demo/server.ts
+++ b/src/demo/server.ts
@@ -41,20 +41,14 @@ app.use(async (ctx: Koa.Context, next: Function) => {
   const ssrResult = await (renderModule(
     './app-server.js',
     import.meta.url,
-    'renderApp',
-    [
-      {
-        name: 'SSR',
-        message: 'This is a test.',
-        items: ['foo', 'bar', 'qux'],
-      },
-    ]
+    'renderAppWithInitialData',
+    []
   ) as Promise<AsyncIterable<unknown>>);
 
   ctx.type = 'text/html';
   ctx.body = new AsyncIterableReader(ssrResult);
 });
-app.use(nodeResolve());
+app.use(nodeResolve({}));
 app.use(staticFiles(packageRoot));
 app.listen(port, () => {
   console.log(`Server listening on port ${port}`);

From 719b4a071b7ab69584f527b225ec714c1a467e32 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Fri, 15 May 2020 12:10:12 -0700
Subject: [PATCH 04/13] Update deps

It's important for lerna that these deps point to the same versions as installed deps have in their package.json. Otherwise packages are not linked correctly. Real branches should be installed manually by checking them out.
---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index cc355d0..f2108b3 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,9 @@
     "koa": "^2.7.0",
     "koa-node-resolve": "^1.0.0-pre.5",
     "koa-static": "^5.0.0",
-    "lit-element": "Polymer/lit-element#hydration",
-    "lit-html": "Polymer/lit-html#hydration",
+    "lit-element": "^2.3.1",
+    "lit-html": "^1.2.1",
+    "template-shadowroot": "^0.0.0",
     "parse5": "^5.1.0",
     "parse5-traverse": "^1.0.3",
     "resolve": "^1.10.1",

From 714c1f37e88d5ef662d03a56b1c5de9bbe26ff5e Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Mon, 18 May 2020 16:45:38 -0700
Subject: [PATCH 05/13] Use github packages for CI

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f2108b3..13efe5b 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,8 @@
     "koa": "^2.7.0",
     "koa-node-resolve": "^1.0.0-pre.5",
     "koa-static": "^5.0.0",
-    "lit-element": "^2.3.1",
-    "lit-html": "^1.2.1",
+    "lit-element": "Polymer/lit-html#hydration-hydrate",
+    "lit-html": "Polymer/lit-html#hydration",
     "template-shadowroot": "^0.0.0",
     "parse5": "^5.1.0",
     "parse5-traverse": "^1.0.3",

From 08aacfc0cd51aae8bdfa88aa2345c5d7bb8e446e Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Mon, 18 May 2020 17:48:34 -0700
Subject: [PATCH 06/13] Add (non-polyfill) support for `element.style`

---
 src/demo/app-client.ts          |  4 +--
 src/demo/module.ts              | 51 +++++++++++++++++++--------------
 src/lib/element-renderer.ts     |  2 +-
 src/lib/lit-element-renderer.ts | 30 ++++++++++++-------
 src/lib/render-lit-html.ts      |  7 +++--
 5 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/src/demo/app-client.ts b/src/demo/app-client.ts
index 46f10a8..b8469c0 100644
--- a/src/demo/app-client.ts
+++ b/src/demo/app-client.ts
@@ -32,7 +32,7 @@ window.setTimeout(() => {
   // The first call to render() can use new data, and will only update the DOM
   // where this data differs from that passed to hydrate().
   render(
-    template({name: 'Hydration', message: 'We have now been hydrated and updated with new data.', items: ['hy', 'dra', 'ted'], prop: 'prop-updated', attr: 'attr-updated'}),
+    template({name: 'Hydration', message: 'We have now been hydrated and updated with new data.', items: ['hy', 'dra', 'ted'], prop: 'prop-updated', attr: 'attr-updated', hasUpdated: true}),
     window.document.body
   );
-}, 500);
+}, 0);
diff --git a/src/demo/module.ts b/src/demo/module.ts
index c17da11..899b66a 100644
--- a/src/demo/module.ts
+++ b/src/demo/module.ts
@@ -3,7 +3,7 @@
  */
 
 import {html} from 'lit-html';
-import {LitElement} from 'lit-element';
+import {LitElement, css} from 'lit-element';
 //import {repeat} from 'lit-html/directives/repeat.js';
 
 export const initialData = {
@@ -11,7 +11,8 @@ export const initialData = {
   message: 'This is a test.',
   items: ['foo', 'bar', 'qux'],
   prop: 'prop-value',
-  attr: 'attr-value'
+  attr: 'attr-value',
+  hasUpdated: false
 };
 
 export class MyElement extends LitElement {
@@ -19,31 +20,39 @@ export class MyElement extends LitElement {
   static get properties() {
     return {
       prop: {type: String},
-      attr: {type: String}
+      attr: {type: String},
+      hasUpdated: {type: Boolean, reflect: true}
     }
   }
 
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+        border: 1px dashed gray;
+        margin: 4px;
+        padding: 4px;
+      }
+
+      :host > * {
+        padding: 4px;
+      }
+
+      header {
+        font-weight: bold;
+      }
+
+      :host([hasUpdated]) {
+        background: lightgreen;
+      }
+    `;
+  }
+
   prop = 'initial-prop';
   attr = 'initial-attr';
 
   render() {
     return html`
-      <style>
-        :host {
-          display: inline-block;
-          border: 1px dashed gray;
-          margin: 4px;
-          padding: 4px;
-        }
-
-        :host > * {
-          padding: 4px;
-        }
-
-        header {
-          font-weight: bold;
-        }
-      </style>
       <header>I'm a my-element!</header>
       <div><i>this.prop</i>: ${this.prop}</div>
       <div><i>this.attr</i>: ${this.attr}</div>
@@ -57,7 +66,7 @@ export const header = (name: string) =>
     <h1>Hello ${name}!</h1>
   `;
 
-export const template = (data: {name: string, message: string, items: Array<string>, prop: string, attr: string}) =>
+export const template = (data: {name: string, message: string, items: Array<string>, prop: string, attr: string, hasUpdated: boolean}) =>
   html`
     ${header(data.name)}
     <p>${data.message}</p>
@@ -71,6 +80,6 @@ export const template = (data: {name: string, message: string, items: Array<stri
       )}
     </div>
     ${Array(3).fill(1).map((_item, i) => html`
-      <my-element .prop=${`${data.prop}: ${i}`} attr=${`${data.attr}: ${i}`}></my-element>
+      <my-element ?hasUpdated=${data.hasUpdated} .prop=${`${data.prop}: ${i}`} attr=${`${data.attr}: ${i}`}></my-element>
     `)}
   `;
diff --git a/src/lib/element-renderer.ts b/src/lib/element-renderer.ts
index 2e6aac6..f072845 100644
--- a/src/lib/element-renderer.ts
+++ b/src/lib/element-renderer.ts
@@ -39,5 +39,5 @@ export interface ElementRenderer {
    *
    * @param c The element _class_ to render styles for.
    */
-  renderStyles(c: Constructor<HTMLElement>): Iterator<string>;
+  renderStyles(c: HTMLElement): Iterator<string>;
 }
diff --git a/src/lib/lit-element-renderer.ts b/src/lib/lit-element-renderer.ts
index e6aa5ec..f28c6a5 100644
--- a/src/lib/lit-element-renderer.ts
+++ b/src/lib/lit-element-renderer.ts
@@ -15,7 +15,7 @@
 import {ElementRenderer} from './element-renderer.js';
 import {LitElement, TemplateResult, CSSResult} from 'lit-element';
 import {render, RenderInfo} from './render-lit-html.js';
-import StyleTransformer from '@webcomponents/shadycss/src/style-transformer.js';
+//import StyleTransformer from '@webcomponents/shadycss/src/style-transformer.js';
 
 export type Constructor<T> = {new (): T};
 
@@ -31,23 +31,31 @@ export class LitElementRenderer implements ElementRenderer {
       render(): TemplateResult;
     }).render();
     yield '<template shadowroot="open">';
+    yield* this.renderStyles(instance);
     yield* render(renderResult);
     yield '</template>';
   }
 
   *renderStyles(
-    _elementClass: Constructor<HTMLElement>
-  ): Iterator<string> {
-    const scopedStyles = [];
-    for (const [tagName, definition] of (customElements as any).__definitions) {
-      const styles = [(definition.ctor as any).styles].flat(Infinity);
-      for (const style of styles) {
-        if (style instanceof CSSResult) {
-          const scoped = StyleTransformer.css(style.cssText, tagName);
-          scopedStyles.push(scoped);
+    instance: LitElement
+  ): IterableIterator<string> {
+    const ctor = customElements.get(instance.tagName);
+    const styles = [(ctor as any).styles].flat(Infinity);
+    let hasCssResult = false;
+    for (const style of styles) {
+      if (style instanceof CSSResult) {
+        if (!hasCssResult) {
+          hasCssResult = true;
+          yield '<style>';
         }
+        // TODO(sorvell): support ShadyCSS transformed styles. These should
+        // be written once.
+        //const scoped = StyleTransformer.css(style.cssText, tagName);
+        yield style.cssText;
       }
     }
-    return scopedStyles;
+    if (hasCssResult) {
+      yield '</style>';
+    }
   }
 }
diff --git a/src/lib/render-lit-html.ts b/src/lib/render-lit-html.ts
index 1ea714f..782a902 100644
--- a/src/lib/render-lit-html.ts
+++ b/src/lib/render-lit-html.ts
@@ -270,9 +270,10 @@ export function* renderTemplateResult(
           // Instantiate the element and stream its render() result
           try {
             instance = new ctor();
-            renderInfo.instances[
-              renderInfo.instances.length - 1
-            ].instance = instance;
+            (instance as any).tagName = node.tagName;
+            // renderInfo.instances[
+            //   renderInfo.instances.length - 1
+            // ].instance = instance;
           } catch (e) {
             console.error('Exception in custom element constructor', e);
           }

From 8437b7c10ec54bb54e253c1821a447de853d0978 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 19 May 2020 11:50:10 -0700
Subject: [PATCH 07/13] Fix package.json and package-lock.json

---
 package-lock.json | 102 +++++++++++++++++++++++++---------------------
 package.json      |   2 +-
 2 files changed, 57 insertions(+), 47 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f39fe4a..d70ebb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1201,6 +1201,12 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "dev": true
+        },
+        "urijs": {
+          "version": "1.19.2",
+          "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.2.tgz",
+          "integrity": "sha512-s/UIq9ap4JPZ7H1EB5ULo/aOUbWqfDi7FKzMC2Nz+0Si8GiT1rIEaprt8hy3Vy2Ex2aJPpOQv4P4DuOZ+K1c6w==",
+          "dev": true
         }
       }
     },
@@ -3296,17 +3302,6 @@
       "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
       "dev": true
     },
-    "form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "dev": true,
-      "requires": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
-        "mime-types": "^2.1.12"
-      }
-    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -4280,14 +4275,14 @@
       }
     },
     "lit-element": {
-      "version": "github:Polymer/lit-element#cb77d1297b20da1a9c70a214565b47df5d126f61",
+      "version": "github:Polymer/lit-element#28d48989d15ac7243328f7aaf4be9113bc798504",
       "from": "github:Polymer/lit-element#hydration",
       "requires": {
         "lit-html": "^1.2.0"
       }
     },
     "lit-html": {
-      "version": "github:Polymer/lit-html#0caac982160f463b5c6938afa3282b208ddf75ef",
+      "version": "github:Polymer/lit-html#ddc0f99d010503e49bc99beef8627f7d7b71db54",
       "from": "github:Polymer/lit-html#hydration"
     },
     "load-json-file": {
@@ -5299,9 +5294,9 @@
       "dev": true
     },
     "request": {
-      "version": "2.88.2",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "version": "2.88.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
       "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
@@ -5311,7 +5306,7 @@
         "extend": "~3.0.2",
         "forever-agent": "~0.6.1",
         "form-data": "~2.3.2",
-        "har-validator": "~5.1.3",
+        "har-validator": "~5.1.0",
         "http-signature": "~1.2.0",
         "is-typedarray": "~1.0.0",
         "isstream": "~0.1.2",
@@ -5321,16 +5316,43 @@
         "performance-now": "^2.1.0",
         "qs": "~6.5.2",
         "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.5.0",
+        "tough-cookie": "~2.4.3",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
       },
       "dependencies": {
+        "form-data": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.6",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+          "dev": true
+        },
         "qs": {
           "version": "6.5.2",
           "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
           "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
           "dev": true
+        },
+        "tough-cookie": {
+          "version": "2.4.3",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
+          "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.24",
+            "punycode": "^1.4.1"
+          }
         }
       }
     },
@@ -5697,15 +5719,6 @@
         "function-bind": "^1.1.1"
       }
     },
-    "strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "^2.0.0"
-      }
-    },
     "strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -5837,6 +5850,15 @@
             "supports-color": "^2.0.0"
           }
         },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
         "supports-color": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
@@ -5900,6 +5922,10 @@
         "onetime": "^2.0.0"
       }
     },
+    "template-shadowroot": {
+      "version": "github:webcomponents/template-shadowroot#a6f2c88bd1c4da41a02f0d02525169f498957c1e",
+      "from": "github:webcomponents/template-shadowroot"
+    },
     "terser": {
       "version": "4.6.7",
       "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.7.tgz",
@@ -6034,16 +6060,6 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
-    "tough-cookie": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-      "dev": true,
-      "requires": {
-        "psl": "^1.1.28",
-        "punycode": "^2.1.1"
-      }
-    },
     "tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@@ -6260,12 +6276,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "urijs": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.2.tgz",
-      "integrity": "sha512-s/UIq9ap4JPZ7H1EB5ULo/aOUbWqfDi7FKzMC2Nz+0Si8GiT1rIEaprt8hy3Vy2Ex2aJPpOQv4P4DuOZ+K1c6w==",
-      "dev": true
-    },
     "useragent": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/useragent/-/useragent-2.3.0.tgz",
@@ -6289,9 +6299,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
       "dev": true
     },
     "valid-url": {
diff --git a/package.json b/package.json
index 13efe5b..a408501 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "koa-static": "^5.0.0",
     "lit-element": "Polymer/lit-html#hydration-hydrate",
     "lit-html": "Polymer/lit-html#hydration",
-    "template-shadowroot": "^0.0.0",
+    "template-shadowroot": "webcomponents/template-shadowroot",
     "parse5": "^5.1.0",
     "parse5-traverse": "^1.0.3",
     "resolve": "^1.10.1",

From a5b674308ad399d9b01200d7ce44dd2b95fecc98 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 19 May 2020 11:54:53 -0700
Subject: [PATCH 08/13] Use decorators

---
 src/demo/app-client.ts |  2 +-
 src/demo/module.ts     | 54 +++++++++++++++++++-----------------------
 2 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/src/demo/app-client.ts b/src/demo/app-client.ts
index b8469c0..f165bb4 100644
--- a/src/demo/app-client.ts
+++ b/src/demo/app-client.ts
@@ -32,7 +32,7 @@ window.setTimeout(() => {
   // The first call to render() can use new data, and will only update the DOM
   // where this data differs from that passed to hydrate().
   render(
-    template({name: 'Hydration', message: 'We have now been hydrated and updated with new data.', items: ['hy', 'dra', 'ted'], prop: 'prop-updated', attr: 'attr-updated', hasUpdated: true}),
+    template({name: 'Hydration', message: 'We have now been hydrated and updated with new data.', items: ['hy', 'dra', 'ted'], prop: 'prop-updated', attr: 'attr-updated', wasUpdated: true}),
     window.document.body
   );
 }, 0);
diff --git a/src/demo/module.ts b/src/demo/module.ts
index 899b66a..96e9f1b 100644
--- a/src/demo/module.ts
+++ b/src/demo/module.ts
@@ -3,7 +3,7 @@
  */
 
 import {html} from 'lit-html';
-import {LitElement, css} from 'lit-element';
+import {LitElement, css, property} from 'lit-element';
 //import {repeat} from 'lit-html/directives/repeat.js';
 
 export const initialData = {
@@ -12,44 +12,38 @@ export const initialData = {
   items: ['foo', 'bar', 'qux'],
   prop: 'prop-value',
   attr: 'attr-value',
-  hasUpdated: false
+  wasUpdated: false
 };
 
 export class MyElement extends LitElement {
 
-  static get properties() {
-    return {
-      prop: {type: String},
-      attr: {type: String},
-      hasUpdated: {type: Boolean, reflect: true}
+  static styles = css`
+    :host {
+      display: inline-block;
+      border: 1px dashed gray;
+      margin: 4px;
+      padding: 4px;
     }
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: inline-block;
-        border: 1px dashed gray;
-        margin: 4px;
-        padding: 4px;
-      }
 
-      :host > * {
-        padding: 4px;
-      }
+    :host > * {
+      padding: 4px;
+    }
 
-      header {
-        font-weight: bold;
-      }
+    header {
+      font-weight: bold;
+    }
 
-      :host([hasUpdated]) {
-        background: lightgreen;
-      }
-    `;
-  }
+    :host([wasUpdated]) {
+      background: lightgreen;
+    }
+  `;
 
+  @property({type: String})
   prop = 'initial-prop';
+  @property({type: String})
   attr = 'initial-attr';
+  @property({type: Boolean, reflect: true})
+  wasUpdated = false;
 
   render() {
     return html`
@@ -66,7 +60,7 @@ export const header = (name: string) =>
     <h1>Hello ${name}!</h1>
   `;
 
-export const template = (data: {name: string, message: string, items: Array<string>, prop: string, attr: string, hasUpdated: boolean}) =>
+export const template = (data: {name: string, message: string, items: Array<string>, prop: string, attr: string, wasUpdated: boolean}) =>
   html`
     ${header(data.name)}
     <p>${data.message}</p>
@@ -80,6 +74,6 @@ export const template = (data: {name: string, message: string, items: Array<stri
       )}
     </div>
     ${Array(3).fill(1).map((_item, i) => html`
-      <my-element ?hasUpdated=${data.hasUpdated} .prop=${`${data.prop}: ${i}`} attr=${`${data.attr}: ${i}`}></my-element>
+      <my-element ?wasUpdated=${data.wasUpdated} .prop=${`${data.prop}: ${i}`} attr=${`${data.attr}: ${i}`}></my-element>
     `)}
   `;

From b2746aa1cd4bd09b9d98cf495bf3b62bbf95af0a Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 19 May 2020 11:55:28 -0700
Subject: [PATCH 09/13] Format

---
 src/demo/app-client.ts          | 14 +++++++++-----
 src/demo/module.ts              | 26 ++++++++++++++++++++------
 src/lib/lit-element-renderer.ts |  4 +---
 src/lib/render-lit-html.ts      | 11 +++++++----
 4 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/demo/app-client.ts b/src/demo/app-client.ts
index f165bb4..38e4ca9 100644
--- a/src/demo/app-client.ts
+++ b/src/demo/app-client.ts
@@ -22,17 +22,21 @@ console.log('Page hydrating with same data as rendered with SSR.');
 // The hydrate() function is run with the same data as used in the server
 // render. It doesn't update the DOM, and just updates the lit-html part values
 // so that future renders() will do the minimal DOM updates.
-hydrate(
-  template(initialData),
-  window.document.body
-);
+hydrate(template(initialData), window.document.body);
 
 window.setTimeout(() => {
   console.log('Page updating with new data...');
   // The first call to render() can use new data, and will only update the DOM
   // where this data differs from that passed to hydrate().
   render(
-    template({name: 'Hydration', message: 'We have now been hydrated and updated with new data.', items: ['hy', 'dra', 'ted'], prop: 'prop-updated', attr: 'attr-updated', wasUpdated: true}),
+    template({
+      name: 'Hydration',
+      message: 'We have now been hydrated and updated with new data.',
+      items: ['hy', 'dra', 'ted'],
+      prop: 'prop-updated',
+      attr: 'attr-updated',
+      wasUpdated: true,
+    }),
     window.document.body
   );
 }, 0);
diff --git a/src/demo/module.ts b/src/demo/module.ts
index 96e9f1b..8a50137 100644
--- a/src/demo/module.ts
+++ b/src/demo/module.ts
@@ -12,11 +12,10 @@ export const initialData = {
   items: ['foo', 'bar', 'qux'],
   prop: 'prop-value',
   attr: 'attr-value',
-  wasUpdated: false
+  wasUpdated: false,
 };
 
 export class MyElement extends LitElement {
-
   static styles = css`
     :host {
       display: inline-block;
@@ -60,7 +59,14 @@ export const header = (name: string) =>
     <h1>Hello ${name}!</h1>
   `;
 
-export const template = (data: {name: string, message: string, items: Array<string>, prop: string, attr: string, wasUpdated: boolean}) =>
+export const template = (data: {
+  name: string;
+  message: string;
+  items: Array<string>;
+  prop: string;
+  attr: string;
+  wasUpdated: boolean;
+}) =>
   html`
     ${header(data.name)}
     <p>${data.message}</p>
@@ -73,7 +79,15 @@ export const template = (data: {name: string, message: string, items: Array<stri
           `
       )}
     </div>
-    ${Array(3).fill(1).map((_item, i) => html`
-      <my-element ?wasUpdated=${data.wasUpdated} .prop=${`${data.prop}: ${i}`} attr=${`${data.attr}: ${i}`}></my-element>
-    `)}
+    ${Array(3)
+      .fill(1)
+      .map(
+        (_item, i) => html`
+          <my-element
+            ?wasUpdated=${data.wasUpdated}
+            .prop=${`${data.prop}: ${i}`}
+            attr=${`${data.attr}: ${i}`}
+          ></my-element>
+        `
+      )}
   `;
diff --git a/src/lib/lit-element-renderer.ts b/src/lib/lit-element-renderer.ts
index f28c6a5..062c177 100644
--- a/src/lib/lit-element-renderer.ts
+++ b/src/lib/lit-element-renderer.ts
@@ -36,9 +36,7 @@ export class LitElementRenderer implements ElementRenderer {
     yield '</template>';
   }
 
-  *renderStyles(
-    instance: LitElement
-  ): IterableIterator<string> {
+  *renderStyles(instance: LitElement): IterableIterator<string> {
     const ctor = customElements.get(instance.tagName);
     const styles = [(ctor as any).styles].flat(Infinity);
     let hasCssResult = false;
diff --git a/src/lib/render-lit-html.ts b/src/lib/render-lit-html.ts
index 782a902..0f294b4 100644
--- a/src/lib/render-lit-html.ts
+++ b/src/lib/render-lit-html.ts
@@ -112,12 +112,15 @@ declare global {
   }
 }
 
-const setAttributeToElement = (element: LitElement, name: string,
-    value: unknown) => {
+const setAttributeToElement = (
+  element: LitElement,
+  name: string,
+  value: unknown
+) => {
   if (element.attributeChangedCallback) {
     element.attributeChangedCallback(name, null, value as string);
   }
-}
+};
 
 /**
  * Returns the scoped style sheets required by all elements currently defined.
@@ -348,7 +351,7 @@ export function* renderTemplateResult(
             let attributeString = `${attributeName}="`;
             // attr.value has the raw attribute value, which may contain multiple
             // bindings. Replace the markers with their resolved values.
-            const value = getAttrValue(attr, result, partIndex)
+            const value = getAttrValue(attr, result, partIndex);
             // Set attribute into element instance
             if (instance !== undefined) {
               setAttributeToElement(instance, attributeName, value);

From fd378bf9e05b89e191adc3eec248480e1e19152c Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 19 May 2020 12:54:08 -0700
Subject: [PATCH 10/13] Expand ElementRenderer/LitElementRenderer

Adds to ElementRenderer:
* setProperty
* setAttribute

Adds to LitElementRenderer
* renderLight
---
 src/demo/app-client.ts          |  2 +-
 src/lib/element-renderer.ts     | 29 +++++++++--------
 src/lib/lit-element-renderer.ts | 40 ++++++++++++++---------
 src/lib/render-lit-html.ts      | 56 ++++++++++++++-------------------
 4 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/src/demo/app-client.ts b/src/demo/app-client.ts
index 38e4ca9..6edfd54 100644
--- a/src/demo/app-client.ts
+++ b/src/demo/app-client.ts
@@ -16,7 +16,7 @@ LitElement.hydrate = hydrate;
 // at `node_modules/lit-html` and
 // `node_modules/lit-element/node_modules/lit-html`. This should be addressed
 // by fixing the dev server, but setting it here works around this problem.
-LitElement.render = render;
+(LitElement as any).render = render;
 
 console.log('Page hydrating with same data as rendered with SSR.');
 // The hydrate() function is run with the same data as used in the server
diff --git a/src/lib/element-renderer.ts b/src/lib/element-renderer.ts
index f072845..9f190be 100644
--- a/src/lib/element-renderer.ts
+++ b/src/lib/element-renderer.ts
@@ -1,7 +1,5 @@
 /// <reference lib="dom" />
 
-import {RenderInfo} from './render-lit-html.js';
-
 /**
  * @license
  * Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
@@ -22,22 +20,27 @@ export type Constructor<T> = {new (): T};
  * An object that renders elements of a certain type.
  */
 export interface ElementRenderer {
+  element: HTMLElement;
+
+  tagName: string;
+
   /**
    * Render a single element's ShadowRoot contents.
    *
-   * @param e The element instance to render
-   * @param childRenderer A `ChildRenderer` that can be used to render children
-   *     into slots.
    */
-  renderElement(
-    e: HTMLElement,
-    renderInfo: RenderInfo
-  ): IterableIterator<string>;
+  renderElement(): IterableIterator<string>;
 
   /**
-   * Render the pre-scoped styles for an element definition.
-   *
-   * @param c The element _class_ to render styles for.
+   * Handles setting a property.
+   * @param name Name of the property
+   * @param value Value of the property
+   */
+  setProperty(name: string, value: unknown): void;
+
+  /**
+   * Handles setting an attribute on an element.
+   * @param name Name of the attribute
+   * @param value Value of the attribute
    */
-  renderStyles(c: HTMLElement): Iterator<string>;
+  setAttribute(name: string, value: string | null): void;
 }
diff --git a/src/lib/lit-element-renderer.ts b/src/lib/lit-element-renderer.ts
index 062c177..2df307f 100644
--- a/src/lib/lit-element-renderer.ts
+++ b/src/lib/lit-element-renderer.ts
@@ -14,8 +14,7 @@
 
 import {ElementRenderer} from './element-renderer.js';
 import {LitElement, TemplateResult, CSSResult} from 'lit-element';
-import {render, RenderInfo} from './render-lit-html.js';
-//import StyleTransformer from '@webcomponents/shadycss/src/style-transformer.js';
+import {render, renderValue, RenderInfo} from './render-lit-html.js';
 
 export type Constructor<T> = {new (): T};
 
@@ -23,21 +22,15 @@ export type Constructor<T> = {new (): T};
  * An object that renders elements of a certain type.
  */
 export class LitElementRenderer implements ElementRenderer {
-  *renderElement(
-    instance: LitElement,
-    _renderInfo: RenderInfo
-  ): IterableIterator<string> {
-    const renderResult = ((instance as unknown) as {
+  constructor(public element: LitElement, public tagName: string) {}
+
+  *renderElement(): IterableIterator<string> {
+    const renderResult = ((this.element as unknown) as {
       render(): TemplateResult;
     }).render();
     yield '<template shadowroot="open">';
-    yield* this.renderStyles(instance);
-    yield* render(renderResult);
-    yield '</template>';
-  }
-
-  *renderStyles(instance: LitElement): IterableIterator<string> {
-    const ctor = customElements.get(instance.tagName);
+    // Render styles.
+    const ctor = customElements.get(this.tagName);
     const styles = [(ctor as any).styles].flat(Infinity);
     let hasCssResult = false;
     for (const style of styles) {
@@ -55,5 +48,24 @@ export class LitElementRenderer implements ElementRenderer {
     if (hasCssResult) {
       yield '</style>';
     }
+    yield* render(renderResult);
+    yield '</template>';
+  }
+
+  setProperty(name: string, value: unknown) {
+    (this.element as any)[name] = value;
+  }
+
+  setAttribute(name: string, value: string | null) {
+    // Note, this should always exist for LitElement, but we're not yet
+    // explicitly checking for LitElement.
+    if (this.element.attributeChangedCallback) {
+      this.element.attributeChangedCallback(name, null, value as string);
+    }
+  }
+
+  renderLight(renderInfo: RenderInfo) {
+    const templateResult = (this.element as any)?.renderLight();
+    return templateResult ? renderValue(templateResult, renderInfo) : '';
   }
 }
diff --git a/src/lib/render-lit-html.ts b/src/lib/render-lit-html.ts
index 0f294b4..9f6da28 100644
--- a/src/lib/render-lit-html.ts
+++ b/src/lib/render-lit-html.ts
@@ -103,7 +103,11 @@ const getTemplate = (result: TemplateResult) => {
 const globalMarkerRegex = new RegExp(markerRegex, `${markerRegex.flags}g`);
 
 export type RenderInfo = {
-  instances: Array<{tagName: string; instance?: LitElement}>;
+  instances: Array<{
+    tagName: string;
+    instance?: LitElement;
+    renderer?: LitElementRenderer;
+  }>;
 };
 
 declare global {
@@ -112,16 +116,6 @@ declare global {
   }
 }
 
-const setAttributeToElement = (
-  element: LitElement,
-  name: string,
-  value: unknown
-) => {
-  if (element.attributeChangedCallback) {
-    element.attributeChangedCallback(name, null, value as string);
-  }
-};
-
 /**
  * Returns the scoped style sheets required by all elements currently defined.
  */
@@ -159,10 +153,8 @@ export function* renderValue(
       // If a value was produced with renderLight(), we want to call and render
       // the renderLight() method.
       const instance = renderInfo.instances[renderInfo.instances.length - 1];
-      // TODO, move out of here into something LitElement specific
-      if (instance.instance !== undefined) {
-        const templateResult = (instance.instance as any).renderLight();
-        yield* renderValue(templateResult, renderInfo);
+      if (instance?.renderer !== undefined) {
+        yield* instance.renderer.renderLight(renderInfo);
       }
     } else if (value === nothing || value === noChange) {
       // yield nothing
@@ -252,8 +244,8 @@ export function* renderTemplateResult(
         yield* renderValue(value, renderInfo);
       }
     } else if (isElement(node)) {
-      // If the element is custom, this will be the instantiated class
-      let instance: LitElement | undefined = undefined;
+      // If the element is custom, this will be a renderer for the instantiated class
+      let elementRenderer: LitElementRenderer | undefined = undefined;
 
       // Whether to flush the start tag. This is neccessary if we're changing
       // any of the attributes in the tag, so it's true for custom-elements
@@ -272,11 +264,12 @@ export function* renderTemplateResult(
 
           // Instantiate the element and stream its render() result
           try {
-            instance = new ctor();
-            (instance as any).tagName = node.tagName;
-            // renderInfo.instances[
-            //   renderInfo.instances.length - 1
-            // ].instance = instance;
+            elementRenderer = new LitElementRenderer(new ctor(), node.tagName);
+            const currentInstance =
+              renderInfo.instances[renderInfo.instances.length - 1];
+            if (currentInstance !== undefined) {
+              currentInstance.renderer = elementRenderer;
+            }
           } catch (e) {
             console.error('Exception in custom element constructor', e);
           }
@@ -314,8 +307,8 @@ export function* renderTemplateResult(
               partIndex += statics.length - 1;
             }
             // Set property into element instance
-            if (instance !== undefined) {
-              (instance as any)[propertyName] = value;
+            if (elementRenderer !== undefined) {
+              elementRenderer.setProperty(propertyName, value);
             }
             // Property should be reflected to attribute
             const reflectedName = reflectedAttributeName(tagName, propertyName);
@@ -342,8 +335,8 @@ export function* renderTemplateResult(
             const value = result.values[partIndex++];
             if (value) {
               // Set attribute into element instance
-              if (instance !== undefined) {
-                setAttributeToElement(instance, attributeName, value);
+              if (elementRenderer !== undefined) {
+                elementRenderer.setAttribute(attributeName, value as string);
               }
               yield attributeName;
             }
@@ -353,8 +346,8 @@ export function* renderTemplateResult(
             // bindings. Replace the markers with their resolved values.
             const value = getAttrValue(attr, result, partIndex);
             // Set attribute into element instance
-            if (instance !== undefined) {
-              setAttributeToElement(instance, attributeName, value);
+            if (elementRenderer !== undefined) {
+              elementRenderer.setAttribute(attributeName, value);
             }
             attributeString += value;
             partIndex += statics.length - 1;
@@ -377,13 +370,12 @@ export function* renderTemplateResult(
         yield `<!--lit-bindings ${templatePart.index}-->`;
       }
 
-      if (instance !== undefined) {
+      if (elementRenderer !== undefined) {
         // TODO: look up a renderer instead of creating one
-        const renderer = new LitElementRenderer();
-        yield* renderer.renderElement(instance as LitElement, renderInfo);
+        yield* elementRenderer.renderElement();
       }
       // console.log('end element', node.tagName, renderInfo.instances);
-      // renderInfo.instances.pop();
+      renderInfo.instances.pop();
     }
   }
 

From eff10bd31c757e552c8664f70011d293c7edc5ae Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 19 May 2020 13:43:23 -0700
Subject: [PATCH 11/13] Remove warning for hydrate.

---
 src/demo/app-client.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/demo/app-client.ts b/src/demo/app-client.ts
index 6edfd54..ac3dde6 100644
--- a/src/demo/app-client.ts
+++ b/src/demo/app-client.ts
@@ -10,7 +10,7 @@ import {template, initialData} from './module.js';
 declare var window: any;
 
 // Note, give LitElement a hydrate function.
-LitElement.hydrate = hydrate;
+(LitElement as any).hydrate = hydrate;
 // TODO(sorvell): Give LitElement a render function to avoid a version
 // conflict that results from the dev server config. Here lit-html is loaded
 // at `node_modules/lit-html` and

From 8fa8e449714d8f9781a75da223362fb06b869b7c Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 19 May 2020 13:46:03 -0700
Subject: [PATCH 12/13] Update tests.

---
 src/test/lit/render-lit_test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/test/lit/render-lit_test.ts b/src/test/lit/render-lit_test.ts
index 0fc959c..c44c9e6 100644
--- a/src/test/lit/render-lit_test.ts
+++ b/src/test/lit/render-lit_test.ts
@@ -192,7 +192,7 @@ test('simple custom element', async (t: Test) => {
   const result = await render(simpleTemplateWithElement);
   t.equal(
     result,
-    `<!--lit-part tjmYe1kHIVM=--><test-simple><shadow-root><!--lit-part UNbWrd8S5FY=--><main></main><!--/lit-part--></shadow-root></test-simple><!--/lit-part-->`
+    `<!--lit-part tjmYe1kHIVM=--><test-simple><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main></main><!--/lit-part--></template></test-simple><!--/lit-part-->`
   );
 });
 
@@ -202,7 +202,7 @@ test('element with property', async (t: Test) => {
   // TODO: we'd like to remove the extra space in the start tag
   t.equal(
     result,
-    `<!--lit-part v2CxGIW+qHI=--><test-property ><!--lit-bindings 0--><shadow-root><!--lit-part UNbWrd8S5FY=--><main><!--lit-part-->bar<!--/lit-part--></main><!--/lit-part--></shadow-root></test-property><!--/lit-part-->`
+    `<!--lit-part v2CxGIW+qHI=--><test-property ><!--lit-bindings 0--><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part-->bar<!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
   );
 });
 
@@ -215,7 +215,7 @@ test('no slot', async (t: Test) => {
   const result = await render(noSlot);
   t.equal(
     result,
-    `<!--lit-part OpS0yFtM48Q=--><test-simple><shadow-root><!--lit-part UNbWrd8S5FY=--><main></main><!--/lit-part--></shadow-root><p>Hi</p></test-simple><!--/lit-part-->`
+    `<!--lit-part OpS0yFtM48Q=--><test-simple><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main></main><!--/lit-part--></template><p>Hi</p></test-simple><!--/lit-part-->`
   );
 });
 

From e93083e4a87f8357acb4c9ee0ca1236af5effb1c Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 19 May 2020 13:49:27 -0700
Subject: [PATCH 13/13] Address feedback.

---
 src/lib/render-lit-html.ts | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/lib/render-lit-html.ts b/src/lib/render-lit-html.ts
index 7d1310c..a519d31 100644
--- a/src/lib/render-lit-html.ts
+++ b/src/lib/render-lit-html.ts
@@ -296,9 +296,7 @@ const getTemplate = (result: TemplateResult) => {
 };
 
 export type RenderInfo = {
-  customElementInstanceStack: Array<
-    {element: HTMLElement; renderer: LitElementRenderer} | undefined
-  >;
+  customElementInstanceStack: Array<LitElementRenderer | undefined>;
 };
 
 declare global {
@@ -346,7 +344,7 @@ export function* renderValue(
       // the renderLight() method.
       const instance = getLast(renderInfo.customElementInstanceStack);
       if (instance !== undefined) {
-        yield* instance.renderer.renderLight(renderInfo);
+        yield* instance.renderLight(renderInfo);
       }
     } else if (value === nothing || value === noChange) {
       // yield nothing
@@ -409,7 +407,7 @@ export function* renderTemplateResult(
           const propertyName = name.substring(1);
           const value = result.values[partIndex];
           if (instance !== undefined) {
-            instance.renderer.setProperty(propertyName, value);
+            instance.setProperty(propertyName, value);
           }
           // Property should be reflected to attribute
           const reflectedName = reflectedAttributeName(
@@ -432,7 +430,7 @@ export function* renderTemplateResult(
           const value = result.values[partIndex];
           if (value) {
             if (instance !== undefined) {
-              instance.renderer.setAttribute(attributeName, value as string);
+              instance.setAttribute(attributeName, value as string);
             }
             yield attributeName;
           }
@@ -443,10 +441,7 @@ export function* renderTemplateResult(
             partIndex
           )}"`;
           if (instance !== undefined) {
-            instance.renderer.setAttribute(
-              attributeName,
-              attributeString as string
-            );
+            instance.setAttribute(attributeName, attributeString as string);
           }
           yield attributeString;
         }
@@ -460,8 +455,7 @@ export function* renderTemplateResult(
         try {
           const element = new ctor();
           (element as any).tagName = op.tagName;
-          const renderer = new LitElementRenderer(element);
-          instance = {element, renderer};
+          instance = new LitElementRenderer(element);
         } catch (e) {
           console.error('Exception in custom element constructor', e);
         }
@@ -471,7 +465,7 @@ export function* renderTemplateResult(
       case 'custom-element-render': {
         const instance = getLast(renderInfo.customElementInstanceStack);
         if (instance !== undefined) {
-          yield* instance.renderer.renderElement();
+          yield* instance.renderElement();
         }
         break;
       }