From b5e9894925f5c519fa4b2f528266f103a0debbcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Luba=C5=84ski?= <dominik.lubanski@gmail.com>
Date: Thu, 6 Jun 2024 12:29:30 +0200
Subject: [PATCH] feat: remove `content` property & add shadow mode detection
 to render property (#258)

BREAKING CHANGE: The `content` property is no longer supported. The `render` property must be used. In some cases, usage of the `shadow` option might be required.
---
 README.md                             |   6 +-
 docs/README.md                        |   6 +-
 docs/component-model/definition.md    |   2 +-
 docs/component-model/layout-engine.md |   2 +-
 docs/component-model/structure.md     | 126 ++++++------
 docs/component-model/templates.md     |   4 +-
 docs/getting-started.md               |   2 +-
 docs/migration.md                     |  44 ++++-
 docs/router/typescript.md             |   4 +-
 docs/router/usage.md                  |   8 +-
 docs/router/view.md                   |  18 +-
 src/define.js                         |   5 +-
 src/localize.js                       |   8 +-
 src/render.js                         |  51 ++---
 src/template/core.js                  |  80 +++++---
 src/template/helpers/resolve.js       |   6 +-
 src/template/index.js                 |  28 ++-
 src/template/layout.js                |   2 +-
 src/utils.js                          |   1 -
 test/spec/children.js                 |  30 +--
 test/spec/define.js                   | 201 ++++++++++++-------
 test/spec/html.js                     | 265 ++++++++++++++------------
 test/spec/layout.js                   |   8 +-
 test/spec/localize.js                 |   3 +-
 test/spec/mount.js                    |   8 +-
 test/spec/router.js                   |  55 +++---
 test/spec/utils.js                    |  18 ++
 types/index.d.ts                      |  14 +-
 28 files changed, 571 insertions(+), 434 deletions(-)
 create mode 100644 test/spec/utils.js

diff --git a/README.md b/README.md
index 96a0f86a..601ebaca 100644
--- a/README.md
+++ b/README.md
@@ -104,7 +104,7 @@ import Details from  "./details.js";
 const Home = define({
   [router.connect]: { stack: [Details, ...] },
   tag: "app-home",
-  content: () => html`
+  render: () => html`
     <template layout="column">
       <h1>Home</h1>
       <nav layout="row gap">
@@ -118,7 +118,7 @@ const Home = define({
 export define({
   tag: "app-router",
   stack: router(Home),
-  content: ({ stack }) => html`
+  render: ({ stack }) => html`
     <template layout="column">
       ${stack}
     </template>
@@ -139,7 +139,7 @@ Create CSS layouts in-place in templates, even without using Shadow DOM, but sti
 ```javascript
 define({
   tag: "app-home-view",
-  content: () => html`
+  render: () => html`
     <template layout="column center gap:2">
       <div layout="grow grid:1|max">
         <h1>Home</h1>
diff --git a/docs/README.md b/docs/README.md
index de01fd57..c049a421 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -110,7 +110,7 @@ import Details from  "./details.js";
 const Home = define({
   [router.connect]: { stack: [Details, ...] },
   tag: "app-home",
-  content: () => html`
+  render: () => html`
     <template layout="column">
       <h1>Home</h1>
       <nav layout="row gap">
@@ -124,7 +124,7 @@ const Home = define({
 export define({
   tag: "app-router",
   stack: router(Home),
-  content: ({ stack }) => html`
+  render: ({ stack }) => html`
     <template layout="column">
       ${stack}
     </template>
@@ -145,7 +145,7 @@ Create CSS layouts in-place in templates, even without using Shadow DOM, but sti
 ```javascript
 define({
   tag: "app-home-view",
-  content: () => html`
+  render: () => html`
     <template layout="column center gap:2">
       <div layout="grow grid:1|max">
         <h1>Home</h1>
diff --git a/docs/component-model/definition.md b/docs/component-model/definition.md
index 33d0f895..d5018ed4 100644
--- a/docs/component-model/definition.md
+++ b/docs/component-model/definition.md
@@ -145,7 +145,7 @@ import Home from './views/home.js';
 
 const App = {
   stack: router(Home),
-  content: () => html`
+  render: () => html`
     <template layout="column">
       ...
       ${stack}
diff --git a/docs/component-model/layout-engine.md b/docs/component-model/layout-engine.md
index 752fa654..db75452b 100644
--- a/docs/component-model/layout-engine.md
+++ b/docs/component-model/layout-engine.md
@@ -28,7 +28,7 @@ The feature supports both `content` and `render` properties of the component's d
 ```js
 define({
   tag: "my-app-view",
-  content: () => html`
+  render: () => html`
     <template layout="column">
       ...
     </template>
diff --git a/docs/component-model/structure.md b/docs/component-model/structure.md
index 39f0543d..f5bd18cc 100644
--- a/docs/component-model/structure.md
+++ b/docs/component-model/structure.md
@@ -12,10 +12,10 @@ The cache mechanism uses equality check to compare values (`nextValue` !== `last
 
 ## Reserved Keys
 
-There are three reserved property names in the definition:
+There are two reserved property names in the definition:
 
 * `tag` - a string which sets the custom element tag name
-* `render` and `content`, which expect the value as a function, and have additional options available
+* `render` - expects its value as a function for rendering the internal structure of the custom element
 
 ## Translation
 
@@ -53,7 +53,7 @@ define({
 });
 ```
 
-Usually, the shorthand definition is more readable and less verbose, but the second one gives more control over the property behavior, as it provides additional options.
+Usually, the shorthand syntax is more readable and less verbose, but the second one gives more control over the property behavior, as it provides additional options.
 
 ## Attributes
 
@@ -286,21 +286,31 @@ define({
 });
 ```
 
-## `render` & `content`
+## Rendering
 
-The `render` and `content` properties are reserved for the rendering structure of the custom element. The `value` option must be a function, which returns a result of the call to the built-in template engine or a custom update function.
+The `render` property is reserved for the creating structure of the custom element. The `value` option must be a function, which returns a result of the call to the built-in template engine.
 
-The library uses internally the `observe` pattern to called function automatically when dependencies change. As the property returns an update function, it can also be called manually, by `el.render()` or `el.content()`.
+The library uses the `observe` pattern to call the function automatically when dependencies change. As the property resolves to the update function, it can also be called manually, by `el.render()`.
 
-> You can use built-in [template engine](/component/templates.md) with those properties without additional code
+### Element's Content
+
+By default `render` property creates and updates the content of the custom element:
+
+```javascript
+define({
+  tag: "my-element",
+  name: "",
+  render: ({ name }) => html`<h1>Hello ${name}!</h1>`,
+});
+```
 
 ### Shadow DOM
 
-Use the `render` key for the internal structure of the custom element, where you can add isolated styles, slot elements, etc.
+If the root template of the element includes styles or `<slot>` elements, the library renders the content to the shadow DOM:
 
-```javascript
-import { define, html } from "hybrids";
+The template with inline styles:
 
+```javascript
 define({
   tag: "my-element",
   name: "",
@@ -313,88 +323,74 @@ define({
 });
 ```
 
-The `render` property provides unique `options` key for passing additional arguments to `host.attachShadow()` method:
-
-```ts
-render: {
-  value: (host) => { ... },
-  options: {
-    mode: "open" | "closed",
-    delegatesFocus: boolean,
-  },
-  ...
-}
-```
+The template with `<slot>` element:
 
 ```javascript
-import { define, html } from "hybrids";
-
 define({
   tag: "my-element",
-  render: {
-    value: html`<div>...</div>`, 
-    options: { delegatesFocus: true },
-  },
+  render: () => html`
+    <div id="container">
+      <slot></slot>
+    </div>
+  `,
 });
 ```
 
-### Element's Content
+!> Templates are compiled "just in time", so only the root template can be used to determine the rendering mode
 
-Use the `content` property for rendering templates in the content of the custom element. By the design, it does not support isolated styles, slot elements, etc.
+### Explicit Mode
 
-However, it is the way to build an app-like views structure, which can be rendered as a document content in light DOM. It is easily accessible in developer tools and search engines. For example, form elements (like `<input>`) have to be in the same subtree with the `<form>` element.
+If your nested template includes styles or slots, you must use the `shadow` option to force rendering in the Shadow DOM explicitly:
 
 ```javascript
-import { define, html } from "hybrids";
-
 define({
   tag: "my-element",
-  name: "",
-  content: ({ name }) => html`<h1>Hello ${name}!</h1>`
+  show: false,
+  render: {
+    value: ({ show }) => html`
+      <div id="container">
+        ${show && html`<slot></slot>`}
+      </div>
+    `,
+    shadow: true,
+  },
 });
 ```
 
-### Custom Function
+You can use the `shadow` option to force both rendering modes:
 
-The preferred way is to use a built-in [template engine](/component/templates.md), but you can use any function to update the DOM of the custom element, which accepts the following structure:
+```ts
+// Disable Shadow DOM (even if the template includes styles or slot elements)
+render: {
+  value: (host) => html`...`.css`...`,
+  shadow: false,
+  ...
+}
 
-```javascript
-import React from "react";
-import ReactDOM from "react-dom";
-
-export default function reactify(fn) {
-  return (host) => {
-    // get the component using the fn and host element
-    const Component = fn(host); 
-
-    // return the update function
-    return (host, target) => {
-      ReactDOM.render(Component, target);
-    }
-  }
+// Force Shadow DOM
+render: {
+  value: (host) => html`...`,
+  shadow: true,
 }
 ```
 
-```javascript
-import reactify from "./reactify.js";
+You can use `shadow` option for passing custom arguments to the `host.attachShadow()` method:
 
-function MyComponent({ name }) {
-  return <div>{name}</div>;
-}
+```javascript
+import { define, html } from "hybrids";
 
 define({
   tag: "my-element",
-  render: reactify(({ name }) => <MyComponent name={name} />),
-})
+  render: {
+    value: html`<div>...</div>`, 
+    shadow: { mode: "close", delegatesFocus: true },
+  },
+});
 ```
 
-The above example uses the [`factory` pattern](#factories), to produce a function, which accepts the host element and returns the update function, which has `host` and `target` arguments. The `target` argument in the update function can be a `host` or `host.shadowRoot` depending on the property name.
-
-!> The other properties from the `host` must be called in the main function body (not in the update function), as only then they will be correctly observed
-
 ### Reference Internals
 
-Both `render` and `content` properties can be used to reference internals of the custom element. The DOM update process is asynchronous, so to avoid rendering timing issues, always use a property as a reference to the target element. If the property depending on `render` or `content` is called before the first update, the update will be triggered manually by calling the function.
+The `render` property can be used to reference internals of the custom element. The DOM update process is asynchronous, so to avoid rendering timing issues, always use the property as a reference to the target element. If the property depending on `render` is called before the first update, the update will be triggered manually by calling the function.
 
 ```javascript
 import { define, html } from "hybrids";
@@ -419,8 +415,8 @@ define({
       console.log("connected");
       return () => console.log("disconnected");
     },
-    observe(host, value, lastValue) {
-      console.log(`${value} -> ${lastValue}`);
+    observe(host) {
+      console.log("rendered");
     },
   },
 });
diff --git a/docs/component-model/templates.md b/docs/component-model/templates.md
index 5b98576c..9f6b17c2 100644
--- a/docs/component-model/templates.md
+++ b/docs/component-model/templates.md
@@ -545,7 +545,7 @@ The built-in `html.transition` plugin utilizes the [Transition API](https://deve
 define({
   tag: 'my-app',
   stack: router([Home]),
-  content: ({ stack }) => html`
+  render: ({ stack }) => html`
     <header>...</header>
     <main>${stack}</main>
     ...
@@ -560,7 +560,7 @@ The transition API can be customized by the CSS properties. The DOM elements mig
 ```javascript
 export default define({
   tag: 'my-app-home',
-  content: () => html`
+  render: () => html`
     <template layout="column">
       ...
       <div layout="view:card"></div>
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 766dbed7..9e84fe42 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -21,7 +21,7 @@ Otherwise, you can use it directly from a number of CDNs, which provide a hybrid
   define({
     tag: "hello-world",
     name: '',
-    content: ({ name }) => html`<p>Hello ${name}!</p>`,
+    render: ({ name }) => html`<p>Hello ${name}!</p>`,
   });
 </script>
 ```
diff --git a/docs/migration.md b/docs/migration.md
index 73ffb7a6..c61c86ac 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -2,7 +2,7 @@
 
 ## v9.0.0
 
-The `v9.0` release brings simplification into the full object property descriptor and moves out some rarely used default behaviors into optional features.
+The `v9.0` release brings simplification into the full object property descriptor, removes the `content` property, and moves out some rarely used default behaviors into optional features.
 
 ### Descriptors
 
@@ -49,11 +49,11 @@ Writable properties are no longer automatically synchronized back to the attribu
 
 Read more about the attribute synchronization in the [Structure](/component-model/structure.md#reflect) section.
 
-### Render and Content
+### Render Property
 
-#### Keys
+#### Key
 
-The `render` and `content` properties are now reserved and expect an update function as a value (they cannot be used for other purpose). If you defined them as a full descriptor with custom behavior, you must rename them:
+The `render` property is now reserved and expects an update function as a value (it cannot be used for other purpose). If you defined it as a full descriptor with custom behavior, you must rename the property:
 
 ```javascript
 // before
@@ -74,7 +74,39 @@ The `render` and `content` properties are now reserved and expect an update func
 }
 ```
 
-#### Shadow DOM
+#### Content
+
+From now, the `content` property has no special behavior, so it does not render. As the content should not include styles or `<slot>` elements, it is sufficient to just rename the property to `render`:
+
+```javascript
+// before
+{
+  content: () => html`...`,
+  ...
+}
+```
+
+```javascript
+// after
+{
+  render: () => html`...`,
+  ...
+}
+```
+
+If you need to pass styles to the element's content, you can disable Shadow DOM explicitly:
+  
+```javascript
+{
+  render: {
+    value: () => html`...`.css`body { font-size: 14px }`,
+    shadow: false,
+  },
+  ...
+}
+```
+
+#### Options
 
 The options are now part of the `render` descriptor instead of a need to extend the `render` function:
 
@@ -91,7 +123,7 @@ The options are now part of the `render` descriptor instead of a need to extend
 {
   render: {
     value: (host) => html`...`,
-    options: { mode: "close" },
+    shadow: { mode: "close" },
   },
   ...
 }
diff --git a/docs/router/typescript.md b/docs/router/typescript.md
index 3ab49010..7a3bcb21 100644
--- a/docs/router/typescript.md
+++ b/docs/router/typescript.md
@@ -12,7 +12,7 @@ interface MyView {
 export default define<MyView>({
   [router.connect]: { url: "/my-view" },
   tag: "my-view",
-  content: ({ param }) => html`
+  render: ({ param }) => html`
     <p>${param}</p>
   `,
 });
@@ -60,7 +60,7 @@ interface MyView {
 const MyView: Component<MyView> = {
   [router.connect]: { url: "/my-view" },
   tag: "my-view",
-  content: ({ param }) => html`
+  render: ({ param }) => html`
     <p>${param}</p>
   `,
 };
diff --git a/docs/router/usage.md b/docs/router/usage.md
index 77423b2e..7d2f402b 100644
--- a/docs/router/usage.md
+++ b/docs/router/usage.md
@@ -16,7 +16,7 @@ import Home from "./views/Home.js";
 export define({
   tag: "my-app",
   stack: router(Home),
-  content: ({ stack }) => html`
+  render: ({ stack }) => html`
     <my-app-layout>
       ${stack}
     </my-app-layout>
@@ -116,7 +116,7 @@ import TabTwoView from "./TabTwoView.js";
 export default define({
   tag: "my-module-view",
   tabs: router([TabOneView, TabTwoView]),
-  content: ({ tabs }) => html`
+  render: ({ tabs }) => html`
     <my-tabs-group>
       <a href="${router.url(TabOneView)}">Tab One</a>
       <a href="${router.url(TabTwoView)}">Tab Two</a>
@@ -265,7 +265,7 @@ export default define({
   },
   tag: "my-user-dialog",
   user: store(UserModel),
-  content: ({ user }) => html`
+  render: ({ user }) => html`
     <dialog>
       <p>Are you sure?</p>
       <a href="${router.url(Users)}" onclick="${deleteUser}">Yes</a>
@@ -307,7 +307,7 @@ const OneView = define({
 define({
   tag: "my-app",
   views: router(OneView),
-  content: ({ views }) => html`
+  render: ({ views }) => html`
     <nav>
       <my-link
         href="${router.url(OneView)}"
diff --git a/docs/router/view.md b/docs/router/view.md
index bb3f6ee8..215275a5 100644
--- a/docs/router/view.md
+++ b/docs/router/view.md
@@ -10,7 +10,7 @@ import { define, html, router } from "hybrids";
 export default define({
   [router.connect]: { stack: [...] },
   tag: "my-app-view",
-  content: ({ ... }) => html`
+  render: ({ ... }) => html`
     <my-button>...</my-button>
     ...
   `,
@@ -44,7 +44,7 @@ import Users from "./User.js";
 export default define({
   [router.connect]: { stack: [Users] },
   tag: "my-home-view",
-  content: () => html`
+  render: () => html`
     <h1>Home</h1>
 
     <a href="${router.url(Users)}">Users</a>
@@ -75,7 +75,7 @@ export default define({
   tag: "my-users-view",
   page: 1,
   users: store([UserModel], { id: ({ page }) => ({ page })}),
-  content: ({ users }) => html`
+  render: ({ users }) => html`
     <h1>Users View</h1>
 
     ${store.ready(users) && users.map(user => html`
@@ -120,7 +120,7 @@ const MyUserDialog = define({
   },
   tag: "my-user-dialog",
   user: store(UserModel),
-  content: () => html`
+  render: () => html`
     <dialog>
       <p>Are you sure?</p>
       <a href="${router.url(Users)}" onclick="${deleteUser}">Yes</a>
@@ -136,7 +136,7 @@ export default define({
   },
   tag: "my-user-view",
   user: store(UserModel),
-  content: ({ user }) => html`
+  render: ({ user }) => html`
     <h1>User View</h1>
 
     <p>${store.ready(user) && user.name}</p>
@@ -165,7 +165,7 @@ export default define({
   },
   tag: "my-product-view",
   product: store(Product),
-  content: ({ product }) => html`
+  render: ({ product }) => html`
     <h1>Product View</h1>
 
     ${store.ready(product) && html`
@@ -196,7 +196,7 @@ export default define({
   [router.connect]: { replace: true },
   tag: "my-user-details-view",
   ...,
-  content: ({ user }) => html`
+  render: ({ user }) => html`
     ...
     <p>
       Follows: 
@@ -237,7 +237,7 @@ export default define({
   },
   tag: "my-login-view",
   session: store(Session, { draft: true }),
-  content: () => html`
+  render: () => html`
     <h1>Login</h1>
     <form onsubmit="${login}" action="${router.guardUrl()}">
       <input value="${session.login}" oninput="${html.set(session, "login")}" />
@@ -268,7 +268,7 @@ export const Session = {
 export default define({
   tag: "my-async-app",
   session: store(Session),
-  content: ({ session }) => 
+  render: ({ session }) => 
     store.ready(session) || store.error(session) 
     ? html`<my-app></my-app>`
     : html`<app-loader>...</app-loader>`
diff --git a/src/define.js b/src/define.js
index 269f4509..11a346bb 100644
--- a/src/define.js
+++ b/src/define.js
@@ -85,10 +85,7 @@ function compile(hybrids, HybridsElement) {
       );
     }
 
-    desc =
-      key === "render" || key === "content"
-        ? render(key, desc)
-        : value(key, desc);
+    desc = key === "render" ? render(desc) : value(key, desc);
 
     if (desc.writable) {
       writable.add(key);
diff --git a/src/localize.js b/src/localize.js
index 17129784..8b1ef547 100644
--- a/src/localize.js
+++ b/src/localize.js
@@ -1,6 +1,5 @@
 import { getPlaceholder } from "./template/utils.js";
 
-import { probablyDevMode } from "./utils.js";
 import { compile } from "./template/index.js";
 
 const dictionary = new Map();
@@ -81,7 +80,7 @@ export function get(key, context, args = []) {
       }
       if (!msg) {
         msg = key;
-        if ((dictionary.size || translate) && probablyDevMode) {
+        if (dictionary.size || translate) {
           console.warn(
             `Missing translation: "${key}"${context ? ` [${context}]` : ""}`,
           );
@@ -166,12 +165,16 @@ export function msg(parts, ...args) {
   return getString(parts, args).replace(EXP_REGEX, (_, index) => args[index]);
 }
 
+const PLACEHOLDER_MSG = getPlaceholder("msg");
+const PLACEHOLDER_SVG = getPlaceholder("svg");
+
 msg.html = function html(parts, ...args) {
   const input = getString(parts, args);
 
   return compile(
     input.replace(EXP_REGEX, (_, index) => getPlaceholder(index)),
     args,
+    input + PLACEHOLDER_MSG,
     false,
     true,
   );
@@ -183,6 +186,7 @@ msg.svg = function svg(parts, ...args) {
   return compile(
     input.replace(EXP_REGEX, (_, index) => getPlaceholder(index)),
     args,
+    input + PLACEHOLDER_MSG + PLACEHOLDER_SVG,
     true,
     true,
   );
diff --git a/src/render.js b/src/render.js
index a9f53739..26f5810d 100644
--- a/src/render.js
+++ b/src/render.js
@@ -1,13 +1,15 @@
-export default function render(key, desc) {
+export const shadowOptions = new WeakMap();
+
+export default function render(desc) {
   if (desc.reflect) {
-    throw TypeError(`'reflect' option is not supported for '${key}' property`);
+    throw TypeError(`'reflect' option is not supported for 'render' property`);
   }
 
   const { value: fn, observe } = desc;
 
   if (typeof fn !== "function") {
     throw TypeError(
-      `Value for '${key}' property must be a function: ${typeof fn}`,
+      `Value for 'render' property must be a function: ${typeof fn}`,
     );
   }
 
@@ -22,35 +24,20 @@ export default function render(key, desc) {
         },
   };
 
-  if (key === "render") {
-    const options = desc.options || {};
+  const shadow = desc.shadow
+    ? {
+        mode: desc.shadow.mode || "open",
+        delegatesFocus: desc.shadow.delegatesFocus || false,
+      }
+    : desc.shadow;
 
-    const shadowOptions = {
-      mode: options.mode || "open",
-      delegatesFocus: options.delegatesFocus || false,
-    };
+  return {
+    value: (host) => {
+      const updateDOM = fn(host);
+      shadowOptions.set(host, shadow);
 
-    return {
-      value: (host) => {
-        const updateDOM = fn(host);
-        return () => {
-          const target = host.shadowRoot || host.attachShadow(shadowOptions);
-          updateDOM(host, target);
-          return target;
-        };
-      },
-      ...rest,
-    };
-  } else {
-    return {
-      value: (host) => {
-        const updateDOM = fn(host);
-        return () => {
-          updateDOM(host, host);
-          return host;
-        };
-      },
-      ...rest,
-    };
-  }
+      return () => updateDOM(host);
+    },
+    ...rest,
+  };
 }
diff --git a/src/template/core.js b/src/template/core.js
index 42cbde01..d284b5ce 100644
--- a/src/template/core.js
+++ b/src/template/core.js
@@ -1,5 +1,6 @@
-import { stringifyElement, probablyDevMode } from "../utils.js";
+import { stringifyElement } from "../utils.js";
 import { get as getMessage, isLocalizeEnabled } from "../localize.js";
+import { shadowOptions } from "../render.js";
 
 import * as layout from "./layout.js";
 import {
@@ -17,7 +18,7 @@ const PLACEHOLDER_REGEXP_EQUAL = new RegExp(`^${PLACEHOLDER_REGEXP_TEXT}$`);
 const PLACEHOLDER_REGEXP_ALL = new RegExp(PLACEHOLDER_REGEXP_TEXT, "g");
 const PLACEHOLDER_REGEXP_ONLY = /^[^A-Za-z]+$/;
 
-function createSignature(parts) {
+function createContents(parts) {
   let signature = parts[0];
   let tableMode = false;
   for (let index = 1; index < parts.length; index += 1) {
@@ -190,19 +191,18 @@ function updateStyleElement(target, styles) {
 }
 
 export function compileTemplate(rawParts, isSVG, isMsg, useLayout) {
+  const contents = isMsg ? rawParts : createContents(rawParts);
   let template = globalThis.document.createElement("template");
-  const parts = {};
-
-  const signature = isMsg ? rawParts : createSignature(rawParts);
-
-  template.innerHTML = isSVG ? `<svg>${signature}</svg>` : signature;
 
   if (isSVG) {
+    template.innerHTML = `<svg>${contents}</svg>`;
     const svgRoot = template.content.firstChild;
     template.content.removeChild(svgRoot);
     for (const node of Array.from(svgRoot.childNodes)) {
       template.content.appendChild(node);
     }
+  } else {
+    template.innerHTML = contents;
   }
 
   let hostLayout;
@@ -235,9 +235,12 @@ export function compileTemplate(rawParts, isSVG, isMsg, useLayout) {
   }
 
   const compileWalker = createWalker(template.content);
+  const parts = {};
   const notDefinedElements = [];
+
   let compileIndex = 0;
   let noTranslate = null;
+  let useShadow = false;
 
   while (compileWalker.nextNode()) {
     let node = compileWalker.currentNode;
@@ -347,25 +350,30 @@ export function compileTemplate(rawParts, isSVG, isMsg, useLayout) {
     } else {
       /* istanbul ignore else */
       if (node.nodeType === globalThis.Node.ELEMENT_NODE) {
+        if (
+          node.tagName === "STYLE" ||
+          node.tagName === "SLOT" ||
+          (node.tagName === "LINK" && node.rel === "stylesheet")
+        ) {
+          useShadow = true;
+        }
+
         if (
           !noTranslate &&
           (node.getAttribute("translate") === "no" ||
-            node.tagName.toLowerCase() === "script" ||
-            node.tagName.toLowerCase() === "style")
+            node.tagName === "SCRIPT" ||
+            node.tagName === "STYLE")
         ) {
           noTranslate = node;
         }
 
-        /* istanbul ignore else */
-        if (probablyDevMode) {
-          const tagName = node.tagName.toLowerCase();
-          if (
-            tagName.match(/.+-.+/) &&
-            !globalThis.customElements.get(tagName) &&
-            !notDefinedElements.includes(tagName)
-          ) {
-            notDefinedElements.push(tagName);
-          }
+        const tagName = node.tagName.toLowerCase();
+        if (
+          tagName.match(/.+-.+/) &&
+          !globalThis.customElements.get(tagName) &&
+          !notDefinedElements.includes(tagName)
+        ) {
+          notDefinedElements.push(tagName);
         }
 
         for (const attr of Array.from(node.attributes)) {
@@ -437,18 +445,35 @@ export function compileTemplate(rawParts, isSVG, isMsg, useLayout) {
     compileIndex += 1;
   }
 
-  if (probablyDevMode && notDefinedElements.length) {
+  if (notDefinedElements.length) {
     console.warn(
       `Not defined ${notDefinedElements
         .map((e) => `<${e}>`)
         .join(", ")} element${
         notDefinedElements.length > 1 ? "s" : ""
-      } found in the template:\n${beautifyTemplateLog(signature, -1)}`,
+      } found in the template:\n${beautifyTemplateLog(contents, -1)}`,
     );
   }
 
   const partsKeys = Object.keys(parts);
-  return function updateTemplateInstance(host, target, args, { styleSheets }) {
+  return function updateTemplateInstance(host, target, args, styleSheets) {
+    let shadow = shadowOptions.get(host);
+    if (target) {
+      if (
+        target !== host &&
+        !host.shadowRoot &&
+        shadow !== false &&
+        (useShadow || styleSheets)
+      ) {
+        throw TypeError(
+          `Nested template with styles or <slot> element found - use 'shadow' options to explicitly define mode`,
+        );
+      }
+    } else {
+      shadow = shadow ?? ((useShadow || styleSheets) && { mode: "open" });
+      target = host.shadowRoot || (shadow && host.attachShadow(shadow)) || host;
+    }
+
     let meta = getMeta(target);
 
     if (template !== meta.template) {
@@ -522,9 +547,12 @@ export function compileTemplate(rawParts, isSVG, isMsg, useLayout) {
 
     for (const marker of meta.markers) {
       const value = args[marker.index];
-      const prevValue = meta.prevArgs && meta.prevArgs[marker.index];
+      let prevValue = undefined;
 
-      if (meta.prevArgs && value === prevValue) continue;
+      if (meta.prevArgs) {
+        prevValue = meta.prevArgs[marker.index];
+        if (prevValue === value) continue;
+      }
 
       try {
         marker.fn(host, marker.node, value, prevValue, useLayout);
@@ -532,7 +560,7 @@ export function compileTemplate(rawParts, isSVG, isMsg, useLayout) {
         console.error(
           `Error while updating template expression in ${stringifyElement(
             host,
-          )}:\n${beautifyTemplateLog(signature, marker.index)}`,
+          )}:\n${beautifyTemplateLog(contents, marker.index)}`,
         );
 
         throw error;
@@ -540,5 +568,7 @@ export function compileTemplate(rawParts, isSVG, isMsg, useLayout) {
     }
 
     meta.prevArgs = args;
+
+    return target;
   };
 }
diff --git a/src/template/helpers/resolve.js b/src/template/helpers/resolve.js
index f2212d01..8ee28e54 100644
--- a/src/template/helpers/resolve.js
+++ b/src/template/helpers/resolve.js
@@ -1,4 +1,4 @@
-import resolveTemplateValue from "../resolvers/value.js";
+import resolveValue from "../resolvers/value.js";
 
 const promiseMap = new WeakMap();
 export default function resolve(promise, placeholder, delay = 200) {
@@ -9,7 +9,7 @@ export default function resolve(promise, placeholder, delay = 200) {
     if (placeholder) {
       timeout = setTimeout(() => {
         timeout = undefined;
-        resolveTemplateValue(host, target, placeholder, undefined, useLayout);
+        resolveValue(host, target, placeholder, undefined, useLayout);
       }, delay);
     }
 
@@ -19,7 +19,7 @@ export default function resolve(promise, placeholder, delay = 200) {
       if (timeout) clearTimeout(timeout);
 
       if (promiseMap.get(target) === promise) {
-        resolveTemplateValue(
+        resolveValue(
           host,
           target,
           value,
diff --git a/src/template/index.js b/src/template/index.js
index a096a8fa..a9231de2 100644
--- a/src/template/index.js
+++ b/src/template/index.js
@@ -6,42 +6,40 @@ import * as methods from "./methods.js";
 
 const PLACEHOLDER = getPlaceholder();
 const PLACEHOLDER_SVG = getPlaceholder("svg");
-const PLACEHOLDER_MSG = getPlaceholder("msg");
 const PLACEHOLDER_LAYOUT = getPlaceholder("layout");
 
 const templates = new Map();
-export function compile(parts, args, isSVG, isMsg) {
-  function template(host, target = host) {
-    let id = isMsg ? parts + PLACEHOLDER_MSG : parts.join(PLACEHOLDER);
-    if (isSVG) id += PLACEHOLDER_SVG;
-    const useLayout = template.useLayout;
-    if (useLayout) id += PLACEHOLDER_LAYOUT;
+export function compile(parts, args, id, isSVG, isMsg) {
+  function fn(host, target) {
+    if (fn.useLayout) id += id + PLACEHOLDER_LAYOUT;
 
     let render = templates.get(id);
     if (!render) {
-      render = compileTemplate(parts, isSVG, isMsg, useLayout);
+      render = compileTemplate(parts, isSVG, isMsg, fn.useLayout);
       templates.set(id, render);
     }
 
-    if (template.plugins) {
-      template.plugins.reduce(
+    if (fn.plugins) {
+      return fn.plugins.reduce(
         (acc, plugin) => plugin(acc),
-        () => render(host, target, args, template),
+        () => render(host, target, args, fn.styleSheets),
       )(host, target);
     } else {
-      render(host, target, args, template);
+      return render(host, target, args, fn.styleSheets);
     }
   }
 
-  return Object.assign(template, methods);
+  return Object.assign(fn, methods);
 }
 
 export function html(parts, ...args) {
-  return compile(parts, args, false, false);
+  const id = parts.join(PLACEHOLDER);
+  return compile(parts, args, id, false, false);
 }
 
 export function svg(parts, ...args) {
-  return compile(parts, args, true, false);
+  const id = parts.join(PLACEHOLDER) + PLACEHOLDER_SVG;
+  return compile(parts, args, id, true, false);
 }
 
 Object.freeze(Object.assign(html, helpers));
diff --git a/src/template/layout.js b/src/template/layout.js
index d177604b..564de5df 100644
--- a/src/template/layout.js
+++ b/src/template/layout.js
@@ -214,7 +214,7 @@ export function inject(target) {
   const sheet = getCSSStyleSheet();
 
   /* istanbul ignore else */
-  if (hasAdoptedStylesheets) {
+  if (hasAdoptedStylesheets && root.adoptedStyleSheets) {
     root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
   } else {
     if (root === globalThis.document) return;
diff --git a/src/utils.js b/src/utils.js
index 79fab1a7..f01e25ee 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -45,4 +45,3 @@ export function walkInShadow(target, cb) {
 
 export const deferred = Promise.resolve();
 export const storePointer = new WeakMap();
-export const probablyDevMode = walkInShadow.name === "walkInShadow";
diff --git a/test/spec/children.js b/test/spec/children.js
index 0c426926..9af2dd28 100644
--- a/test/spec/children.js
+++ b/test/spec/children.js
@@ -33,7 +33,10 @@ describe("children:", () => {
         tag: "test-children-direct",
         direct: children(child),
         customName: ({ direct }) => direct && direct[0] && direct[0].customName,
-        render: ({ customName }) => html` ${customName} `,
+        render: {
+          value: ({ customName }) => html` ${customName} `,
+          shadow: true,
+        },
       });
     });
 
@@ -292,17 +295,20 @@ describe("children:", () => {
       define({
         tag: "test-dynamic-wrapper",
         items: undefined,
-        render: ({ items }) => html`
-          <test-dynamic-parent>
-            <test-dynamic-child name="one"></test-dynamic-child>
-            ${items &&
-            items.map((name) =>
-              html`
-                <test-dynamic-child name="${name}"></test-dynamic-child>
-              `.key(name),
-            )}
-          </test-dynamic-parent>
-        `,
+        render: {
+          value: ({ items }) => html`
+            <test-dynamic-parent>
+              <test-dynamic-child name="one"></test-dynamic-child>
+              ${items &&
+              items.map((name) =>
+                html`
+                  <test-dynamic-child name="${name}"></test-dynamic-child>
+                `.key(name),
+              )}
+            </test-dynamic-parent>
+          `,
+          shadow: true,
+        },
       });
     });
 
diff --git a/test/spec/define.js b/test/spec/define.js
index aa33fcbb..2429d7c0 100644
--- a/test/spec/define.js
+++ b/test/spec/define.js
@@ -82,6 +82,15 @@ describe("define:", () => {
     expect(define.compile({ some: "" }).prototype).toBeInstanceOf(HTMLElement);
   });
 
+  it("skips the definition if the hybrids are the same", () => {
+    const hybrids = { tag: "test-define-skip" };
+    expect(define(hybrids)).toBe(hybrids);
+
+    return resolveRaf(() => {
+      expect(define(hybrids)).toBe(hybrids);
+    });
+  });
+
   it("redefines the same element", () => {
     define({
       tag: "test-define-same-deep",
@@ -92,7 +101,10 @@ describe("define:", () => {
       tag: "test-define-same",
       prop1: "test",
       prop2: "other",
-      render: () => html` <test-define-same-deep></test-define-same-deep> `,
+      render: () => html`
+        <test-define-same-deep></test-define-same-deep>
+        <slot></slot>
+      `,
     });
 
     el = document.createElement("test-define-same");
@@ -114,14 +126,14 @@ describe("define:", () => {
         expect(el.prop1).toBe(undefined);
         expect(el.prop2).toBe("test");
 
-        expect(el.shadowRoot.children[0].prop).toBe("other");
+        expect(el.render().children[0].prop).toBe("other");
       });
     });
   });
 
   it("upgrades values from the instance", () => {
     el = document.createElement("test-define-upgrade-values");
-    el.prop1 = "0";
+    el.prop1 = "1";
     el.prop2 = "asdf";
 
     document.body.appendChild(el);
@@ -132,7 +144,7 @@ describe("define:", () => {
       prop2: false,
     });
 
-    expect(el.prop1).toBe(0);
+    expect(el.prop1).toBe(1);
     expect(el.prop2).toBe(true);
   });
 
@@ -203,23 +215,17 @@ describe("define:", () => {
     document.body.appendChild(el);
 
     return resolveRaf(() => {
-      expect(el.shadowRoot.innerHTML).toBe(
-        "<div>0</div><div>0</div><div>0</div>",
-      );
+      expect(el.innerHTML).toBe("<div>0</div><div>0</div><div>0</div>");
 
       el.prop1 = 1;
 
       return resolveRaf(() => {
-        expect(el.shadowRoot.innerHTML).toBe(
-          "<div>1</div><div>1</div><div>0</div>",
-        );
+        expect(el.innerHTML).toBe("<div>1</div><div>1</div><div>0</div>");
 
         el.prop1 = 2;
 
         return resolveRaf(() => {
-          expect(el.shadowRoot.innerHTML).toBe(
-            "<div>2</div><div>2</div><div>1</div>",
-          );
+          expect(el.innerHTML).toBe("<div>2</div><div>2</div><div>1</div>");
         });
       });
     });
@@ -260,10 +266,6 @@ describe("define:", () => {
           value: () => 0,
         },
         notDefined: undefined,
-        render: ({ prop1 }) =>
-          html`<div>${prop1}</div>`, // prettier-ignore
-        content: ({ prop1 }) =>
-          html`<div>${prop1}</div>`, // prettier-ignore
       });
     });
 
@@ -429,88 +431,141 @@ describe("define:", () => {
       });
     });
 
-    it("renders to shadowRoot", () => {
-      document.body.appendChild(el);
-      expect(el.shadowRoot).toBe(null);
+    describe("render property", () => {
+      it("calls observe method for render property", () => {
+        const spy = jasmine.createSpy("observe");
+        define({
+          tag: "test-define-render-observe",
+          render: {
+            value: () => html`<div></div>`,
+            observe: spy,
+          },
+        });
 
-      return resolveRaf(() => {
-        expect(el.shadowRoot.innerHTML).toBe("<div>default</div>");
-        el.prop1 = "a";
+        el = document.createElement("test-define-render-observe");
+        document.body.appendChild(el);
 
         return resolveRaf(() => {
-          expect(el.shadowRoot.innerHTML).toBe("<div>a</div>");
+          expect(spy).toHaveBeenCalledTimes(1);
         });
       });
-    });
 
-    it("calls observe method of the render property", () => {
-      const spy = jasmine.createSpy("observe");
-      define({
-        tag: "test-define-render-observe",
-        render: {
-          value: () => html`<div></div>`,
-          observe: spy,
-        },
+      it("renders content to children", () => {
+        define({
+          tag: "test-define-render-content",
+          render: () => html`<div>content</div>`,
+        });
+
+        el = document.createElement("test-define-render-content");
+        document.body.appendChild(el);
+
+        return resolveRaf(() => {
+          expect(el.innerHTML).toBe("<div>content</div>");
+        });
       });
 
-      el = document.createElement("test-define-render-observe");
-      document.body.appendChild(el);
+      it("renders content with slot element to shadow root ", () => {
+        define({
+          tag: "test-define-render-content",
+          render: () => html`<slot></slot>`,
+        });
 
-      return resolveRaf(() => {
-        expect(spy).toHaveBeenCalledTimes(1);
+        el = document.createElement("test-define-render-content");
+        document.body.appendChild(el);
+
+        return resolveRaf(() => {
+          expect(el.shadowRoot.innerHTML).toBe("<slot></slot>");
+        });
       });
-    });
 
-    it("uses property options for render in shadowRoot", () => {
-      define({
-        tag: "test-define-render-options",
-        render: {
-          options: { delegatesFocus: true },
-          value: () => html` <div>test</div>`,
-        },
+      it("renders content with styles to shadow root", () => {
+        define({
+          tag: "test-define-render-content",
+          render: () => html`<div>content</div>`.css`:host { color: red }`,
+        });
+
+        el = document.createElement("test-define-render-content");
+        document.body.appendChild(el);
+
+        return resolveRaf(() => {
+          expect(el.shadowRoot.innerHTML).toBe("<div>content</div>");
+        });
       });
 
-      el = document.createElement("test-define-render-options");
-      document.body.appendChild(el);
+      it("renders content with external styles to shadow root", () => {
+        define({
+          tag: "test-define-render-content",
+          render: () => html`
+            <link rel="stylesheet" href="some.css" />
+            <div>content</div>
+          `,
+        });
 
-      el.attachShadow = jasmine.createSpy("attachShadow");
+        el = document.createElement("test-define-render-content");
+        document.body.appendChild(el);
 
-      return resolveRaf(() => {
-        expect(el.attachShadow).toHaveBeenCalledOnceWith({
-          mode: "open",
-          delegatesFocus: true,
+        return resolveRaf(() => {
+          expect(!!el.shadowRoot).toBe(true);
         });
       });
-    });
 
-    it("calls observe method for render property", () => {
-      const spy = jasmine.createSpy("observe");
-      define({
-        tag: "test-define-render-observe",
-        render: {
-          value: () => html`<div></div>`,
-          observe: spy,
-        },
+      it("renders content with styles to children", () => {
+        define({
+          tag: "test-define-render-content",
+          render: {
+            value: () => html`<div>content</div>`.css`:host { color: red }`,
+            shadow: false,
+          },
+        });
+
+        el = document.createElement("test-define-render-content");
+        document.body.appendChild(el);
+
+        return resolveRaf(() => {
+          expect(el.innerHTML).toBe(
+            "<div>content</div><style>:host { color: red }</style>",
+          );
+          expect(el.shadowRoot).toBe(null);
+        });
       });
 
-      el = document.createElement("test-define-render-observe");
-      document.body.appendChild(el);
+      it("renders content to shadow root", () => {
+        define({
+          tag: "test-define-render-content",
+          render: {
+            value: () => html`<div>content</div>`,
+            shadow: true,
+          },
+        });
 
-      return resolveRaf(() => {
-        expect(spy).toHaveBeenCalledTimes(1);
+        el = document.createElement("test-define-render-content");
+        document.body.appendChild(el);
+
+        return resolveRaf(() => {
+          expect(el.innerHTML).toBe("");
+          expect(el.shadowRoot.innerHTML).toBe("<div>content</div>");
+        });
       });
-    });
 
-    it("puts content to children", () => {
-      document.body.appendChild(el);
-      expect(el.innerHTML).toBe("");
+      it("uses shadow option for additional shadowRoot settings", () => {
+        define({
+          tag: "test-define-render-options",
+          render: {
+            shadow: { delegatesFocus: true },
+            value: () => html` <div>test</div>`,
+          },
+        });
 
-      return resolveRaf(() => {
-        expect(el.innerHTML).toBe("<div>default</div>");
-        el.prop1 = "a";
+        el = document.createElement("test-define-render-options");
+        document.body.appendChild(el);
+
+        el.attachShadow = jasmine.createSpy("attachShadow");
 
         return resolveRaf(() => {
-          expect(el.innerHTML).toBe("<div>a</div>");
+          expect(el.attachShadow).toHaveBeenCalledOnceWith({
+            mode: "open",
+            delegatesFocus: true,
+          });
         });
       });
     });
diff --git a/test/spec/html.js b/test/spec/html.js
index 1e001db0..9488fc35 100644
--- a/test/spec/html.js
+++ b/test/spec/html.js
@@ -19,9 +19,35 @@ describe("html:", () => {
   const getArrayValues = (f) =>
     Array.from(f.children).map((child) => child.textContent);
 
+  it("throws for implicit usage of style element in nested template", () => {
+    const render = html` <div>${html` <style></style> `}</div> `;
+
+    expect(() => {
+      render(fragment);
+    }).toThrow();
+  });
+
+  it("throws for implicit usage of inline styles in nested template", () => {
+    const render = html`
+      <div>${html`<div></div>`.css`div { color: red }`}</div>
+    `;
+
+    expect(() => {
+      render(fragment);
+    }).toThrow();
+  });
+
+  it("throws for implicit usage of style or slot element in nested template", () => {
+    const render = html` <div>${html` <slot></slot> `}</div> `;
+
+    expect(() => {
+      render(fragment);
+    }).toThrow();
+  });
+
   it("renders static content", () => {
     const render = html` <div>static content<!-- some comment --></div> `;
-    render({}, fragment);
+    render(fragment);
     expect(fragment.children[0].outerHTML).toBe(
       "<div>static content<!-- some comment --></div>",
     );
@@ -31,8 +57,8 @@ describe("html:", () => {
     const renderOne = () => html` <div>value:</div> `;
     const renderTwo = (value) => html` <div>value:${value}</div> `;
 
-    renderOne()({}, fragment);
-    renderTwo(0)({}, fragment);
+    renderOne()(fragment);
+    renderTwo(0)(fragment);
 
     expect(fragment.children[0].textContent).toBe("value:0");
   });
@@ -75,14 +101,14 @@ describe("html:", () => {
   it("warns when not defined element is found", () => {
     const spy = spyOn(console, "warn");
 
-    html` <not-defined-element></not-defined-element> `({}, fragment);
+    html` <not-defined-element></not-defined-element> `(fragment);
 
     expect(spy).toHaveBeenCalledTimes(1);
 
     html`
       <not-defined-element></not-defined-element>
       <not-defined-element-other></not-defined-element-other>
-    `({}, fragment);
+    `(fragment);
 
     expect(spy).toHaveBeenCalledTimes(2);
   });
@@ -96,7 +122,7 @@ describe("html:", () => {
   it("replaces resolved nested custom element template", (done) => {
     define({
       tag: "test-replace-trigger",
-      content: () => html` content `,
+      render: () => html` content `,
     });
 
     const render = (flag) => html`
@@ -118,7 +144,7 @@ describe("html:", () => {
     `;
 
     it("sets attribute", () => {
-      render("class-two", "class-three")({}, fragment);
+      render("class-two", "class-three")(fragment);
       expect(fragment.children[0].getAttribute("class")).toBe(
         "class-one class-two class-three",
       );
@@ -133,17 +159,17 @@ describe("html:", () => {
         <test-html-computed-property
           value="asd-${"test"}-${"other"}"
         ></test-html-computed-property>
-      `({}, fragment);
+      `(fragment);
       expect(fragment.children[0].value).toBe("asd-test-other");
     });
 
     it("does not set undefined value", () => {
-      render()({}, fragment);
+      render()(fragment);
       expect(fragment.children[0].getAttribute("class")).toBe("class-one  ");
     });
 
     it("clears attribute", () => {
-      render("class-two", "class-three", "some text")({}, fragment);
+      render("class-two", "class-three", "some text")(fragment);
       render("", "", "some text")(fragment);
       expect(fragment.children[0].getAttribute("class")).toBe("class-one  ");
     });
@@ -420,18 +446,22 @@ describe("html:", () => {
     beforeEach(() => render("one", "two")(fragment));
 
     it("renders values", () => {
-      expect(fragment.querySelector("div").textContent).toBe("one, two");
+      expect(fragment.shadowRoot.querySelector("div").textContent).toBe(
+        "one, two",
+      );
     });
 
     it("updates values", () => {
       render("two", "one")(fragment);
-      expect(fragment.querySelector("div").textContent).toBe("two, one");
+      expect(fragment.shadowRoot.querySelector("div").textContent).toBe(
+        "two, one",
+      );
     });
 
     it("removes values", () => {
       render(false, null)(fragment);
 
-      expect(fragment.querySelector("div").textContent).toBe(", ");
+      expect(fragment.shadowRoot.querySelector("div").textContent).toBe(", ");
     });
   });
 
@@ -440,7 +470,7 @@ describe("html:", () => {
       <div>value: ${flag && html` <span>${"one"}</span> `}</div>
     `;
 
-    beforeEach(() => render(true)({}, fragment));
+    beforeEach(() => render(true)(fragment));
 
     it("renders template", () => {
       expect(fragment.children[0].children[0].outerHTML).toBe(
@@ -715,7 +745,7 @@ describe("html:", () => {
         <div class="${"test"}">${"text"}</div>
       `;
 
-      renderTable({}, fragment);
+      renderTable(fragment);
       expect(fragment.children[0].querySelectorAll("td").length).toBe(4);
       expect(fragment.children[1].outerHTML).toBe(
         '<div class="test">text</div>',
@@ -738,7 +768,7 @@ describe("html:", () => {
         </table>
       `;
 
-      renderTable({}, fragment);
+      renderTable(fragment);
       expect(fragment.children[0].querySelectorAll("tr > td").length).toBe(4);
     });
 
@@ -757,7 +787,7 @@ describe("html:", () => {
         </table>
       `;
 
-      renderTable({}, fragment);
+      renderTable(fragment);
       expect(fragment.children[0].querySelectorAll("td").length).toBe(4);
     });
 
@@ -772,7 +802,7 @@ describe("html:", () => {
         </table>
       `;
 
-      render({}, fragment);
+      render(fragment);
       expect(fragment.children[0].querySelector("tr").innerHTML.trim()).toBe(
         "test",
       );
@@ -789,7 +819,7 @@ describe("html:", () => {
         </table>
       `;
 
-      render({}, fragment);
+      render(fragment);
       expect(fragment.children[0].querySelector("tr").innerHTML.trim()).toBe(
         "test 1 test 2",
       );
@@ -806,7 +836,7 @@ describe("html:", () => {
         </table>
       `;
 
-      render({}, fragment);
+      render(fragment);
       expect(fragment.children[0].querySelector("div.one").innerHTML).toBe(
         "two",
       );
@@ -827,56 +857,50 @@ describe("html:", () => {
     });
 
     it("renders an element", () => {
-      render(el1)({}, fragment);
+      render(el1)(fragment);
       expect(fragment.children[0].innerHTML).toEqual("<div>one</div>");
     });
 
     it("removes an element", () => {
-      render(el1)({}, fragment);
-      render()({}, fragment);
+      render(el1)(fragment);
+      render()(fragment);
 
       expect(fragment.children[0].innerHTML).toEqual("");
     });
 
     it("replaces an element with another element", () => {
-      render(el1)({}, fragment);
-      render(el2)({}, fragment);
+      render(el1)(fragment);
+      render(el2)(fragment);
 
       expect(fragment.children[0].innerHTML).toEqual("<div>two</div>");
     });
 
     it("replaces an element with nested template", () => {
-      render(el1)({}, fragment);
+      render(el1)(fragment);
       // prettier-ignore
-      render(html`<span>value</span>`)({}, fragment);
+      render(html`<span>value</span>`)(fragment);
 
       expect(fragment.children[0].innerHTML).toEqual("<span>value</span>");
     });
 
     it("does not replace an element when it is the same", () => {
-      render(el1)({}, fragment);
-      render(el1)({}, fragment);
+      render(el1)(fragment);
+      render(el1)(fragment);
 
       expect(fragment.children[0].innerHTML).toEqual("<div>one</div>");
     });
   });
 
   describe("set helper", () => {
-    let host;
-
-    beforeEach(() => {
-      host = { value: "" };
-    });
-
     it("uses value property from text input", () => {
       const render = html` <input type="text" oninput=${html.set("value")} /> `;
-      render(host, fragment);
+      render(fragment);
 
       const input = fragment.children[0];
       input.value = "John";
       dispatch(input, "input");
 
-      expect(host.value).toBe("John");
+      expect(fragment.value).toBe("John");
     });
 
     it("uses value property from radio input", () => {
@@ -895,15 +919,15 @@ describe("html:", () => {
         />
       `;
 
-      render(host, fragment);
+      render(fragment);
       fragment.children[0].click();
-      expect(host.value).toBe("one");
+      expect(fragment.value).toBe("one");
 
       fragment.children[1].click();
-      expect(host.value).toBe("two");
+      expect(fragment.value).toBe("two");
 
       dispatch(fragment.children[1], "change");
-      expect(host.value).toBe("two");
+      expect(fragment.value).toBe("two");
     });
 
     it("uses value property from checkbox input", () => {
@@ -911,12 +935,12 @@ describe("html:", () => {
         <input type="checkbox" onchange=${html.set("value")} />
       `;
 
-      render(host, fragment);
+      render(fragment);
       fragment.children[0].click();
-      expect(host.value).toBeTruthy();
+      expect(fragment.value).toBeTruthy();
 
       fragment.children[0].click();
-      expect(host.value).toBeFalsy();
+      expect(fragment.value).toBeFalsy();
     });
 
     it("uses files property from file input", () => {
@@ -924,9 +948,9 @@ describe("html:", () => {
         <input type="file" oncustomevent=${html.set("value")} />
       `;
 
-      render(host, fragment);
+      render(fragment);
       dispatch(fragment.children[0], "customevent");
-      expect(host.value).toBeInstanceOf(FileList);
+      expect(fragment.value).toBeInstanceOf(FileList);
     });
 
     it("throws when set store model instance without property name", () => {
@@ -948,7 +972,7 @@ describe("html:", () => {
         <input type="text" oninput=${html.set(model, "value")} />
       `;
 
-      render(host, fragment);
+      render(fragment);
 
       const input = fragment.children[0];
       input.value = "John";
@@ -973,7 +997,7 @@ describe("html:", () => {
         <input type="text" oninput=${html.set(model, "other")} value="Smith" />
       `;
 
-      render(host, fragment);
+      render(fragment);
 
       dispatch(fragment.children[0], "input");
       dispatch(fragment.children[1], "input");
@@ -991,7 +1015,7 @@ describe("html:", () => {
         <input type="text" oninput=${html.set(model, "nested.value")} />
       `;
 
-      render(host, fragment);
+      render(fragment);
 
       const input = fragment.children[0];
       input.value = "John";
@@ -1017,7 +1041,7 @@ describe("html:", () => {
             <button type="text" onclick=${html.set(nextModel, null)}></button>
           `;
 
-          render(host, fragment);
+          render(fragment);
           fragment.children[0].click();
 
           return store.pending(nextModel).then((finalModel) => {
@@ -1031,21 +1055,21 @@ describe("html:", () => {
       const render = html`
         <input type="text" oninput=${html.set("value", undefined)} />
       `;
-      render(host, fragment);
+      render(fragment);
 
       const input = fragment.children[0];
       dispatch(input, "input");
 
-      expect(host.value).toBe(undefined);
+      expect(fragment.value).toBe(undefined);
     });
 
     it("uses value from event detail.value", () => {
       const render = html` <div oncustomevent=${html.set("value")} /> `;
-      render(host, fragment);
+      render(fragment);
       const div = fragment.children[0];
       dispatch(div, "customevent", { detail: { value: "test" } });
 
-      expect(host.value).toBe("test");
+      expect(fragment.value).toBe("test");
     });
 
     it("saves callback in the cache", () => {
@@ -1141,13 +1165,13 @@ describe("html:", () => {
 
       define({
         tag: "test-html-transition-deep",
-        content: () => html`<div>Hello</div>`,
+        render: () => html`<div>Hello</div>`,
       });
 
       define({
         tag: "test-html-transition",
         value: "test",
-        content: ({ value }) =>
+        render: ({ value }) =>
           html`
             <template layout>
               <div>${value}</div>
@@ -1159,7 +1183,7 @@ describe("html:", () => {
           }),
       });
 
-      html`<test-html-transition></test-html-transition>`({}, el);
+      html`<test-html-transition></test-html-transition>`(el);
 
       return resolveTimeout(() => {
         expect(el.children[0].children[0].innerHTML).toEqual("test");
@@ -1177,7 +1201,7 @@ describe("html:", () => {
         html`
           <test-html-transition></test-html-transition>
           <test-html-transition></test-html-transition>
-        `({}, el);
+        `(el);
 
         return resolveTimeout(() => {
           expect(console.warn).toHaveBeenCalledTimes(1);
@@ -1187,7 +1211,7 @@ describe("html:", () => {
   });
 
   describe("style method", () => {
-    const render = () => html` <div>content</div> `;
+    const render = () => html`<div>content</div>`;
 
     it("adds single style with text content", () => {
       const container = fragment.attachShadow({ mode: "open" });
@@ -1200,62 +1224,54 @@ describe("html:", () => {
     });
 
     it("adds multiple styles with text content", () => {
-      const container = fragment.attachShadow({ mode: "open" });
-
-      render().style("div { color: red }", "div { padding-top: 20px }")(
-        fragment,
-        container,
-      );
+      render().style(
+        "div { color: red }",
+        "div { padding-top: 20px }",
+      )(fragment);
 
-      expect(getComputedStyle(container.children[0]).color).toBe(
+      expect(getComputedStyle(fragment.shadowRoot.children[0]).color).toBe(
         "rgb(255, 0, 0)",
       );
-      expect(getComputedStyle(container.children[0]).paddingTop).toBe("20px");
+      expect(getComputedStyle(fragment.shadowRoot.children[0]).paddingTop).toBe(
+        "20px",
+      );
     });
 
     it("adds multiple styles with text content by multiple call", () => {
-      const container = fragment.attachShadow({ mode: "open" });
-
       render().style("div { color: red }").style("div { padding-top: 20px }")(
         fragment,
-        container,
       );
 
-      expect(getComputedStyle(container.children[0]).color).toBe(
+      expect(getComputedStyle(fragment.shadowRoot.children[0]).color).toBe(
         "rgb(255, 0, 0)",
       );
-      expect(getComputedStyle(container.children[0]).paddingTop).toBe("20px");
+      expect(getComputedStyle(fragment.shadowRoot.children[0]).paddingTop).toBe(
+        "20px",
+      );
     });
 
     it("adds styles to the shadowRoot by adoptedStyleSheets or style tags", (done) => {
-      const container = fragment.attachShadow({ mode: "open" });
-      render().style("div { color: red }")({}, container);
-
-      if (!document.adoptedStyleSheets) {
-        expect(container.children.length).toBe(2);
-      }
+      render().style("div { color: red }")(fragment);
 
       setTimeout(() => {
-        expect(getComputedStyle(container.children[0]).color).toBe(
+        expect(getComputedStyle(fragment.shadowRoot.children[0]).color).toBe(
           "rgb(255, 0, 0)",
         );
 
-        html` <div>content</div> `({}, container);
+        html`<div>content</div>`(fragment);
         return setTimeout(() => {
-          if (document.adoptedStyleSheets) {
-            expect(getComputedStyle(container.children[0]).color).toBe(
-              "rgb(0, 0, 0)",
-            );
-          }
+          expect(getComputedStyle(fragment.shadowRoot.children[0]).color).toBe(
+            "rgb(0, 0, 0)",
+          );
 
-          expect(container.children.length).toBe(1);
+          expect(fragment.shadowRoot.children.length).toBe(1);
           done();
         }, 500);
       }, 500);
     });
 
     it("adds styles by style tags to the element", (done) => {
-      render().style("div { color: red }", false)({}, fragment);
+      render().style("div { color: red }", false)(fragment, fragment);
 
       getComputedStyle(fragment.children[0]);
 
@@ -1265,15 +1281,15 @@ describe("html:", () => {
           "rgb(255, 0, 0)",
         );
 
-        render().style("div { color: red }", false)({}, fragment);
-        render().style("div { color: blue; }")({}, fragment);
+        render().style("div { color: red }", false)(fragment, fragment);
+        render().style("div { color: blue; }")(fragment, fragment);
 
         expect(fragment.children.length).toBe(2);
         expect(getComputedStyle(fragment.children[0]).color).toBe(
           "rgb(0, 0, 255)",
         );
 
-        render()({}, fragment);
+        render()(fragment, false);
 
         expect(getComputedStyle(fragment.children[0]).color).toBe(
           "rgb(0, 0, 0)",
@@ -1286,8 +1302,11 @@ describe("html:", () => {
     });
 
     it("replaces styles by style tag when template changes for element", () => {
-      render().style("div { color: red }")({}, fragment);
-      html`<div>content two</div>`.style("div { color: blue; }")({}, fragment);
+      render().style("div { color: red }")(fragment, fragment);
+      html`<div>content two</div>`.style("div { color: blue; }")(
+        fragment,
+        fragment,
+      );
 
       return resolveTimeout(() => {
         expect(getComputedStyle(fragment.children[0]).color).toBe(
@@ -1297,17 +1316,17 @@ describe("html:", () => {
     });
 
     it("replaces styles by style tag when template changes for content", () => {
-      html`${html`content`.style("custom-element { color: red }")}`(
-        {},
+      html`${html`<div>content</div>`.style("div { color: red }")}`(
         fragment,
+        fragment.attachShadow({ mode: "open" }),
       );
-      html`${html`content two`.style("custom-element { color: blue; }")}`(
-        {},
+      html`${html`<div>content two</div>`.style("div { color: blue; }")}`(
         fragment,
+        fragment.shadowRoot,
       );
 
       return resolveTimeout(() => {
-        expect(getComputedStyle(fragment.children[0]).color).toBe(
+        expect(getComputedStyle(fragment.shadowRoot.children[0]).color).toBe(
           "rgb(0, 0, 255)",
         );
       });
@@ -1315,42 +1334,46 @@ describe("html:", () => {
 
     if (document.adoptedStyleSheets) {
       it("does not replace adoptedStyleSheets array when styles are equal", () => {
-        const container = fragment.attachShadow({ mode: "open" });
         const externalStyleSheet = new CSSStyleSheet();
-        container.adoptedStyleSheets = [externalStyleSheet];
+        fragment.attachShadow({ mode: "open" });
+        fragment.shadowRoot.adoptedStyleSheets = [externalStyleSheet];
 
-        render().style("div { color: red }")({}, container);
-        const adoptedStyleSheets = container.adoptedStyleSheets;
+        render().style("div { color: red }")(fragment);
+        const adoptedStyleSheets = fragment.shadowRoot.adoptedStyleSheets;
 
-        render().style("div { color: red }")({}, container);
+        render().style("div { color: red }")(fragment);
 
-        expect(container.adoptedStyleSheets[0]).toBe(externalStyleSheet);
-        expect(container.adoptedStyleSheets[1]).toBe(adoptedStyleSheets[1]);
+        expect(fragment.shadowRoot.adoptedStyleSheets[0]).toBe(
+          externalStyleSheet,
+        );
+        expect(fragment.shadowRoot.adoptedStyleSheets[1]).toBe(
+          adoptedStyleSheets[1],
+        );
       });
 
       it("replaces adoptedStyleSheets array when styles are not equal", () => {
-        const container = fragment.attachShadow({ mode: "open" });
         const externalStyleSheet = new CSSStyleSheet();
-        container.adoptedStyleSheets = [externalStyleSheet];
+        fragment.attachShadow({ mode: "open" });
+        fragment.shadowRoot.adoptedStyleSheets = [externalStyleSheet];
 
-        render().style("div { color: red }")({}, container);
-        const StyleSheet = container.adoptedStyleSheets[0];
+        render().style("div { color: red }")(fragment);
+        const StyleSheet = fragment.shadowRoot.adoptedStyleSheets[0];
 
-        render().style("div { color: blue }")({}, container);
+        render().style("div { color: blue }")(fragment);
 
-        expect(container.adoptedStyleSheets[0]).toBe(externalStyleSheet);
-        expect(container.adoptedStyleSheets[1]).not.toBe(StyleSheet);
+        expect(fragment.shadowRoot.adoptedStyleSheets[0]).toBe(
+          externalStyleSheet,
+        );
+        expect(fragment.shadowRoot.adoptedStyleSheets[1]).not.toBe(StyleSheet);
       });
 
       it("adds styles using CSSStyleSheet instance", () => {
-        const container = fragment.attachShadow({ mode: "open" });
-
         const sheet = new CSSStyleSheet();
         sheet.replaceSync("div { color: red }");
 
-        render().style(sheet)({}, container);
+        render().style(sheet)(fragment);
 
-        expect(getComputedStyle(container.children[0]).color).toBe(
+        expect(getComputedStyle(fragment.shadowRoot.children[0]).color).toBe(
           "rgb(255, 0, 0)",
         );
       });
@@ -1400,14 +1423,12 @@ describe("html:", () => {
     });
 
     it("adds styles with nested template", () => {
-      const container = fragment.attachShadow({ mode: "open" });
-
       html`<div>${html`content`.css`div { color: red }`}</div>`(
         fragment,
-        container,
+        fragment.attachShadow({ mode: "open" }),
       );
 
-      expect(getComputedStyle(container.children[0]).color).toBe(
+      expect(getComputedStyle(fragment.shadowRoot.children[0]).color).toBe(
         "rgb(255, 0, 0)",
       );
     });
@@ -1462,7 +1483,7 @@ describe("html:", () => {
           return fn;
         });
 
-      render({}, fragment);
+      render(fragment);
 
       expect(spy1).toHaveBeenCalledTimes(1);
       expect(spy2).toHaveBeenCalledTimes(1);
@@ -1473,14 +1494,14 @@ describe("html:", () => {
   describe("svg element", () => {
     it("sets attribute from an expression", () => {
       const render = html` <svg viewBox="${"0 0 100 100"}"></svg> `;
-      render({}, fragment);
+      render(fragment);
 
       expect(fragment.children[0].getAttribute("viewBox")).toBe("0 0 100 100");
     });
 
     it("sets attribute from string with an expression", () => {
       const render = html` <svg viewBox="0 0 ${"100"} ${"100"}"></svg> `;
-      render({}, fragment);
+      render(fragment);
 
       expect(fragment.children[0].getAttribute("viewBox")).toBe("0 0 100 100");
     });
diff --git a/test/spec/layout.js b/test/spec/layout.js
index 5975e0b4..d705af0d 100644
--- a/test/spec/layout.js
+++ b/test/spec/layout.js
@@ -160,7 +160,7 @@ describe("layout:", () => {
           flex-flow: column;
         }
       </style>
-    </template>`(host);
+    </template>`(host, host);
 
     host.className = `${host.className} layout-test-column`;
     expect(window.getComputedStyle(host).flexDirection).toBe("column");
@@ -567,18 +567,18 @@ describe("layout:", () => {
         <div layout="::font:headline-m"></div>
       </template>
     `.css`
-      :root {
+      :host {
         --ui-color-red: red;
         --border-thin: 1px solid black;
         --font-headline-m: 24px sans-serif;
       }
     `(host);
 
-    const styles0 = window.getComputedStyle(host.children[0]);
+    const styles0 = window.getComputedStyle(host.shadowRoot.children[0]);
     expect(styles0.color).toBe("rgb(255, 0, 0)");
     expect(styles0.border).toBe("1px solid rgb(0, 0, 0)");
 
-    const styles1 = window.getComputedStyle(host.children[1]);
+    const styles1 = window.getComputedStyle(host.shadowRoot.children[1]);
     expect(styles1.font).toBe("24px sans-serif");
   });
 
diff --git a/test/spec/localize.js b/test/spec/localize.js
index 7dc49350..a8d5f91c 100644
--- a/test/spec/localize.js
+++ b/test/spec/localize.js
@@ -216,7 +216,8 @@ describe("localize:", () => {
           <script>text only</script>
           <style>text only</style>
           <div>text only</div>
-        `(el);
+        `(el, el);
+
         expect(el.children[0].childNodes[0].textContent.trim()).toBe(
           "text only",
         );
diff --git a/test/spec/mount.js b/test/spec/mount.js
index 53c2f5f6..e8b7c021 100644
--- a/test/spec/mount.js
+++ b/test/spec/mount.js
@@ -16,7 +16,7 @@ describe("mount:", () => {
   it("mounts hybrids element to target element", () => {
     mount(target, {
       value: 1,
-      content: ({ value }) => html`<div>${value}</div>`,
+      render: ({ value }) => html`<div>${value}</div>`,
     });
 
     return resolveRaf(() => {
@@ -28,13 +28,13 @@ describe("mount:", () => {
     mount(target, {
       value: 1,
       test: "value",
-      content: ({ value }) => html`<div>${value}</div>`,
+      render: ({ value }) => html`<div>${value}</div>`,
     });
 
     return resolveRaf(() => {
       mount(target, {
         test: "hello",
-        content: (host) => html`<div>${host.test}</div>`,
+        render: (host) => html`<div>${host.test}</div>`,
       });
 
       return resolveRaf(() => {
@@ -49,7 +49,7 @@ describe("mount:", () => {
     const spy = jasmine.createSpy();
     const hybrids = {
       value: 1,
-      content: ({ value }) => {
+      render: ({ value }) => {
         spy();
         return html`<div>${value}</div>`;
       },
diff --git a/test/spec/router.js b/test/spec/router.js
index ceac70fe..62c3bf3e 100644
--- a/test/spec/router.js
+++ b/test/spec/router.js
@@ -26,6 +26,10 @@ describe("router:", () => {
     window.history.replaceState(null, "", browserUrl);
   });
 
+  beforeEach(() => {
+    return resolveTimeout(() => {});
+  });
+
   it("throws for wrong arguments", () => {
     const el = document.createElement("div");
     expect(() => router().connect(el)).toThrow();
@@ -221,7 +225,7 @@ describe("router:", () => {
       [router.connect]: {
         stack: [Target],
       },
-      content: () => html` <a href="${router.url(B)}"></a> `,
+      render: () => html` <a href="${router.url(B)}"></a> `,
     });
 
     const B = define({
@@ -229,13 +233,13 @@ describe("router:", () => {
       [router.connect]: {
         stack: [Target],
       },
-      content: () => html` <a href="${router.url(Target)}"></a> `,
+      render: () => html` <a href="${router.url(Target)}"></a> `,
     });
 
     define({
       tag: "test-router-view-multiple-parents",
       stack: router([A, B]),
-      content: ({ stack }) => html`${stack}`,
+      render: ({ stack }) => html`${stack}`,
     });
 
     const el = document.createElement("test-router-view-multiple-parents");
@@ -291,9 +295,6 @@ describe("router:", () => {
         globalC: "",
         render: () => html`
           <test-router-nested-component></test-router-nested-component>
-          <slot></slot>
-        `,
-        content: () => html`
           <a
             href="${router.url(NestedViewTwo, { value: "1" })}"
             id="NestedViewTwo"
@@ -306,7 +307,7 @@ describe("router:", () => {
         [router.connect]: { url: "/other_url_child" },
         param: false,
         tag: "test-router-other-child-view",
-        content: () => html`
+        render: () => html`
           <a href="${router.url(MultipleView)}" id="MultipleViewFromOtherChild"
             >MultipleViewFromOtherChild</a
           >
@@ -339,8 +340,7 @@ describe("router:", () => {
         globalA: "",
         globalC: "value",
         views: router([NestedViewOne], { params: ["globalC"] }),
-        render: () => html`<slot></slot>`, // prettier-ignore
-        content: ({ views }) => html`
+        render: ({ views }) => html`
           ${views}
           <a href="${router.url(RootView)}" id="RootView">RootView</a>
           <a
@@ -362,15 +362,14 @@ describe("router:", () => {
         [router.connect]: { dialog: true },
         tag: "test-router-dialog2",
         param: 1,
-        content: () =>
-          html`<a href="${router.backUrl()}" id="Dialog2Back"></a>`,
+        render: () => html`<a href="${router.backUrl()}" id="Dialog2Back"></a>`,
       });
 
       Dialog = define({
         [router.connect]: { dialog: true },
         tag: "test-router-dialog",
         param: 1,
-        content: () => html`
+        render: () => html`
           <a href="${router.currentUrl({ param: 2 })}" id="DialogCurrent"
             >DialogCurrent</a
           >
@@ -385,7 +384,7 @@ describe("router:", () => {
         value: "",
         param: 0,
         tag: "test-router-multiple-view",
-        content: () => html`
+        render: () => html`
           <a href="${router.currentUrl()}" id="MultipleViewCurrent"
             >MultipleViewCurrent</a
           >
@@ -405,7 +404,7 @@ describe("router:", () => {
         value: "",
         param: 0,
         tag: "test-router-multiple-with-url-view",
-        content: () => html`
+        render: () => html`
           <a href="${router.currentUrl()}" id="MultipleViewCurrent"
             >MultipleViewCurrent</a
           >
@@ -438,7 +437,7 @@ describe("router:", () => {
         },
         tag: "test-router-root-view",
         globalB: "",
-        content: () => html`
+        render: () => html`
           <a href="${router.url(ChildView)}" id="ChildView">Child</a>
           <a href="${router.url(Dialog)}" id="Dialog">Dialog</a>
           <a href="${router.currentUrl({ scrollToTop: true })}" id="RootView">
@@ -506,7 +505,7 @@ describe("router:", () => {
           params: ["globalA", "globalB"],
           transition: true,
         }),
-        content: ({ views }) => html`${views}`, // prettier-ignore
+        render: ({ views }) => html`${views}`,
       });
 
       return resolveTimeout(() => {});
@@ -581,7 +580,7 @@ describe("router:", () => {
                       define({
                         tag: "test-router-app-another",
                         views: router([Another]),
-                        content: ({ views }) => html`${views}`, // prettier-ignore
+                        render: ({ views }) => html`${views}`, // prettier-ignore
                       });
 
                       host = document.createElement("test-router-app-another");
@@ -737,6 +736,8 @@ describe("router:", () => {
             expect(spyTop.calls.mostRecent().args[0]).toBe(0);
             expect(spyLeft.calls.mostRecent().args[0]).toBe(0);
 
+            expect(host.querySelector("div.overflow").scrollTop).toBe(100);
+
             host.querySelector("#RootView").click();
 
             return resolveTimeout(() => {
@@ -1339,7 +1340,7 @@ describe("router:", () => {
         Child = define({
           tag: "test-router-child-back-url",
           nestedViews: router([NestedOne]),
-          content: () => html` <a href="${router.url(Home)}">Home</a> `,
+          render: () => html` <a href="${router.url(Home)}">Home</a> `,
         });
 
         NestedTwo = define({
@@ -1360,13 +1361,13 @@ describe("router:", () => {
         Home = define({
           [router.connect]: { stack: [Child, OtherChild] },
           tag: "test-router-home-back-url",
-          content: () => html` <a href="${router.guardUrl()}">Child</a> `,
+          render: () => html` <a href="${router.guardUrl()}">Child</a> `,
         });
 
         define({
           tag: "test-router-app-back-url",
           views: router([Home]),
-          content: ({ views }) => html`${views}`, // prettier-ignore
+          render: ({ views }) => html`${views}`, // prettier-ignore
         });
       });
 
@@ -1432,7 +1433,7 @@ describe("router:", () => {
               tag: "test-router-home-view-unguarded",
             }),
           ]),
-          content: ({ views }) => html`${views}`, // prettier-ignore
+          render: ({ views }) => html`${views}`, // prettier-ignore
         });
 
         const guardedHost = document.createElement("test-router-app-unguarded");
@@ -1471,7 +1472,7 @@ describe("router:", () => {
           [router.connect]: {
             url: "/other_child",
           },
-          content: () => html`
+          render: () => html`
             <a href="${router.url(RootView)}" id="RootView">RootView</a>
           `,
         });
@@ -1485,7 +1486,7 @@ describe("router:", () => {
             },
           },
           tag: "test-router-root-view",
-          content: () => html`
+          render: () => html`
             <a href="${router.url(OtherChildView)}" id="OtherChildView"
               >OtherChildView</a
             >
@@ -1495,7 +1496,7 @@ describe("router:", () => {
         define({
           tag: "test-router-app-guard-url",
           views: router([RootView]),
-          content: ({ views }) => html`${views}`, // prettier-ignore
+          render: ({ views }) => html`${views}`, // prettier-ignore
         });
 
         host = document.createElement("test-router-app-guard-url");
@@ -1559,7 +1560,7 @@ describe("router:", () => {
 
       const NestedDebug = define({
         tag: "test-router-nested-debug-view",
-        content: () => html`
+        render: () => html`
           <a
             href="${router.url(OtherNestedDebug, { param: "test" })}"
             id="other-nested-debug"
@@ -1571,13 +1572,13 @@ describe("router:", () => {
       const HomeDebug = define({
         tag: "test-router-home-debug-view",
         stack: router([NestedDebug, OtherNestedDebug]),
-        content: ({ stack }) => html`${stack}`, // prettier-ignore
+        render: ({ stack }) => html`${stack}`, // prettier-ignore
       });
 
       define({
         tag: "test-router-debug",
         stack: router(HomeDebug),
-        content: ({ stack }) => html`${stack}`, // prettier-ignore
+        render: ({ stack }) => html`${stack}`, // prettier-ignore
       });
 
       app = document.createElement("test-router-debug");
diff --git a/test/spec/utils.js b/test/spec/utils.js
new file mode 100644
index 00000000..82d510f6
--- /dev/null
+++ b/test/spec/utils.js
@@ -0,0 +1,18 @@
+import { walkInShadow } from "../../src/utils.js";
+
+describe("utils", () => {
+  describe("walkInShadow", () => {
+    it("calls callback for each node in shadow root", () => {
+      const callback = jasmine.createSpy();
+      const root = document.createElement("div");
+      const shadow = root.attachShadow({ mode: "open" });
+      const child = document.createElement("div");
+
+      shadow.appendChild(child);
+      walkInShadow(root, callback);
+
+      expect(callback).toHaveBeenCalledWith(root);
+      expect(callback).toHaveBeenCalledWith(child);
+    });
+  });
+});
diff --git a/types/index.d.ts b/types/index.d.ts
index 3f81c76f..db8ab228 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -20,7 +20,7 @@ export interface Descriptor<E, V> {
 }
 
 export interface UpdateFunction<E> {
-  (host: E & HTMLElement, target: ShadowRoot | Text | E): void;
+  (host: E & HTMLElement, target?: ShadowRoot | Text | E): void;
 }
 
 export interface RenderFunction<E> {
@@ -30,12 +30,7 @@ export interface RenderFunction<E> {
 export interface RenderDescriptor<E> extends Descriptor<E, RenderFunction<E>> {
   value: RenderFunction<E>;
   reflect?: never;
-  options?: ShadowRootInit;
-}
-
-export interface ContentDescriptor<E> extends Descriptor<E, RenderFunction<E>> {
-  value: RenderFunction<E>;
-  reflect?: never;
+  shadow?: boolean | ShadowRootInit;
 }
 
 export type ComponentBase = {
@@ -49,12 +44,9 @@ export type Component<E> = ComponentBase & {
     string
   >]: property extends "render"
     ? RenderFunction<E> | RenderDescriptor<E>
-    : property extends "content"
-      ? RenderFunction<E> | ContentDescriptor<E>
-      : Property<E, E[property]>;
+    : Property<E, E[property]>;
 } & {
   render?: RenderFunction<E> | RenderDescriptor<E>;
-  content?: RenderFunction<E> | ContentDescriptor<E>;
 };
 
 export interface HybridElement<E> {