From 6efe9cc9a947c8f99e39ff16bcce0e438faf4ee8 Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <hello@mohamedmansour.com>
Date: Mon, 13 Apr 2026 22:30:17 -0700
Subject: [PATCH] chore: remove unnecessary `<template shadowrootmode="open">`
 wrappers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `<template shadowrootmode="open">` wrapper is optional in component
HTML source files — the WebUI build tool auto-injects it when absent.
The wrapper is only needed when the author wants to attach host-level
events or extra attributes to the template tag, e.g.:

```html
<template shadowrootmode="open"
  @toggle-item="{onToggleItem(e)}"
  @delete-item="{onDeleteItem(e)}"
>
```

All other usages are redundant boilerplate that bloats templates.

**HTML templates (55 files):**

Remove the plain `<template shadowrootmode="open">` opening tag and
`</template>` closing tag, then dedent content by 2 spaces. Covers:

- `examples/app/commerce/` — 17 component templates
- `examples/app/routes/` — 1 component template
- `packages/webui-framework/tests/fixtures/` — 37 test fixture templates

Files with host-level events are preserved unchanged:

- `todo-fast/todo-app`, `todo-fast/todo-item` (@toggle-item, @delete-item, @click)
- `todo-webui/todo-app`, `todo-webui/todo-item` (@toggle-item, @delete-item, @click)
- `calculator/calc-app`, `calculator/calc-button` (@button-press, @click)
- `commerce/mp-app` (@toggle-cart, @toggle-mobile-menu)
- `contact-book-manager/cb-app` (@search-change, @select-contact)
- `fixtures/list/test-list` (@toggle-item)
- `fixtures/root-event/test-root-event` (@click)

**Documentation (8 files):**

Remove the wrapper from source-template code examples in:

- `DESIGN.md` — outlet example
- `docs/tutorials/todo-app.md` — todo-item template
- `docs/guide/concepts/routing.md` — 4 shell/page examples
- `docs/guide/concepts/hydration.md` — 2 source template examples
- `docs/guide/concepts/directives/route.md` — 2 outlet examples
- `docs/guide/ai.md` — outlet example
- `packages/webui-router/README.md` — shell example
- `packages/webui-framework/tests/fixtures/README.md` — template guide
- `.github/skills/testing/SKILL.md` — fixture scaffold example

SSR output examples (showing what the build produces) and conceptual
references explaining the `shadowrootmode` attribute are preserved.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .github/skills/testing/SKILL.md               |   8 +-
 DESIGN.md                                     |   6 +-
 docs/guide/ai.md                              |   6 +-
 docs/guide/concepts/directives/route.md       |  20 +-
 docs/guide/concepts/hydration.md              |  36 ++--
 docs/guide/concepts/routing.md                |  28 +--
 docs/tutorials/todo-app.md                    |  20 +-
 .../commerce/src/atoms/mp-price/mp-price.html |  10 +-
 .../mp-product-label/mp-product-label.html    |  10 +-
 .../organisms/mp-carousel/mp-carousel.html    |  40 ++--
 .../mp-cart-panel/mp-cart-panel.html          | 196 +++++++++---------
 .../src/organisms/mp-footer/mp-footer.html    | 104 +++++-----
 .../organisms/mp-hero-grid/mp-hero-grid.html  |  38 ++--
 .../mp-product-gallery.html                   |  68 +++---
 .../mp-product-grid/mp-product-grid.html      |  40 ++--
 .../pages/mp-page-about/mp-page-about.html    |  24 +--
 .../src/pages/mp-page-faq/mp-page-faq.html    |  18 +-
 .../src/pages/mp-page-home/mp-page-home.html  |  14 +-
 .../mp-page-privacy/mp-page-privacy.html      |  14 +-
 .../mp-page-product/mp-page-product.html      | 112 +++++-----
 .../pages/mp-page-search/mp-page-search.html  |  20 +-
 .../mp-page-shipping/mp-page-shipping.html    |  12 +-
 .../pages/mp-page-terms/mp-page-terms.html    |  14 +-
 .../routes/src/lesson-page/lesson-page.html   |   8 +-
 .../webui-framework/tests/fixtures/README.md  |  10 +-
 .../attr/src/test-attr/test-attr.html         |   4 +-
 .../basics/src/test-basics/test-basics.html   |  18 +-
 .../test-bench-events/test-bench-events.html  |   4 +-
 .../test-bench-repeat/test-bench-repeat.html  |   4 +-
 .../bench/src/test-bench/test-bench.html      |   4 +-
 .../src/test-item-host/test-item-host.html    |  12 +-
 .../src/test-item-list/test-item-list.html    |  12 +-
 .../src/test-child-comp/test-child-comp.html  |   4 +-
 .../test-cond-parent/test-cond-parent.html    |  10 +-
 .../test-grandchild-comp.html                 |   4 +-
 .../src/test-mid-comp/test-mid-comp.html      |  10 +-
 .../test-nested-cond-parent.html              |  10 +-
 .../test-conditional-client.html              |  10 +-
 .../test-conditional/test-conditional.html    |  34 ++-
 .../src/test-link-child/test-link-child.html  |   4 +-
 .../src/test-link-host/test-link-host.html    |   4 +-
 .../test-module-child/test-module-child.html  |   4 +-
 .../test-module-host/test-module-host.html    |   4 +-
 .../test-style-child/test-style-child.html    |   6 +-
 .../src/test-style-host/test-style-host.html  |  10 +-
 .../src/test-list-item/test-list-item.html    |  16 +-
 .../test-multi-repeat/test-multi-repeat.html  |  50 +++--
 .../test-nested-child/test-nested-child.html  |   4 +-
 .../test-nested-event/test-nested-event.html  |   4 +-
 .../test-nested-repeat.html                   |  32 ++-
 .../test-no-css-child/test-no-css-child.html  |   4 +-
 .../test-no-css-host/test-no-css-host.html    |   6 +-
 .../fixtures/ref/src/test-ref/test-ref.html   |   4 +-
 .../test-repeat-child/test-repeat-child.html  |   4 +-
 .../test-repeat-parent.html                   |  18 +-
 .../test-repeat-conditional.html              |  34 ++-
 .../test-sidebar-repeat.html                  |  32 ++-
 .../src/test-slot-btn/test-slot-btn.html      |   4 +-
 .../test-slot-parent/test-slot-parent.html    |   4 +-
 .../test-split-repeat/test-split-repeat.html  |  28 ++-
 .../test-state-seed-shell.html                |  24 +--
 .../src/test-state-seed/test-state-seed.html  |  10 +-
 .../test-text-only-repeat.html                |  18 +-
 packages/webui-router/README.md               |  14 +-
 64 files changed, 610 insertions(+), 748 deletions(-)

diff --git a/.github/skills/testing/SKILL.md b/.github/skills/testing/SKILL.md
index 7c4b3cd4..69c02fb1 100644
--- a/.github/skills/testing/SKILL.md
+++ b/.github/skills/testing/SKILL.md
@@ -79,11 +79,9 @@ The test server (`fixture-render.ts`) auto-discovers fixtures with `src/index.ht
 2. Create `fixtures/<name>/src/test-widget/test-widget.html` — component template:
 
 ```html
-<template shadowrootmode="open">
-  <span class="label">{{label}}</span>
-  <span class="count">{{count}}</span>
-  <button class="inc" @click="{increment()}">+</button>
-</template>
+<span class="label">{{label}}</span>
+<span class="count">{{count}}</span>
+<button class="inc" @click="{increment()}">+</button>
 ```
 
 3. Create `fixtures/<name>/state.json` — initial state:
diff --git a/DESIGN.md b/DESIGN.md
index c6f9061e..c472d205 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -182,10 +182,8 @@ pub struct WebUIFragmentOutlet {}
 
 Components use `<outlet />` in their templates to declare insertion points:
 ```html
-<template shadowrootmode="open">
-  <h1>Title</h1>
-  <main><outlet /></main>
-</template>
+<h1>Title</h1>
+<main><outlet /></main>
 ```
 
 **Route declaration:** Routes are declared as nested `<route>` elements in the entry HTML.
diff --git a/docs/guide/ai.md b/docs/guide/ai.md
index 4863c18d..82671bcc 100644
--- a/docs/guide/ai.md
+++ b/docs/guide/ai.md
@@ -207,10 +207,8 @@ In the TypeScript class: `searchInput!: HTMLInputElement;`
 
 ```html
 <!-- Parent component template -->
-<template shadowrootmode="open">
-  <nav>...</nav>
-  <main><outlet /></main>
-</template>
+<nav>...</nav>
+<main><outlet /></main>
 ```
 
 ## Component Class
diff --git a/docs/guide/concepts/directives/route.md b/docs/guide/concepts/directives/route.md
index 6ca388a1..4acc21a4 100644
--- a/docs/guide/concepts/directives/route.md
+++ b/docs/guide/concepts/directives/route.md
@@ -25,13 +25,11 @@ Components that have child routes use `<outlet />` to mark where the matched chi
 
 ```html
 <!-- app-shell.html -->
-<template shadowrootmode="open">
-  <header><nav-bar></nav-bar></header>
-  <main>
-    <outlet />
-  </main>
-  <footer></footer>
-</template>
+<header><nav-bar></nav-bar></header>
+<main>
+  <outlet />
+</main>
+<footer></footer>
 ```
 
 The shell (header, footer) persists across all routes. Only the content at `<outlet />` changes.
@@ -54,11 +52,9 @@ Routes can be nested to any depth. Each level's component uses `<outlet />` for
 
 ```html
 <!-- contacts-page.html -->
-<template shadowrootmode="open">
-  <h2>Contacts</h2>
-  <div class="contact-list">...</div>
-  <outlet />
-</template>
+<h2>Contacts</h2>
+<div class="contact-list">...</div>
+<outlet />
 ```
 
 Navigating from `/contacts/1` to `/contacts/2` preserves the contacts list - only the detail view at `<outlet />` changes.
diff --git a/docs/guide/concepts/hydration.md b/docs/guide/concepts/hydration.md
index cf9d1068..3fc14892 100644
--- a/docs/guide/concepts/hydration.md
+++ b/docs/guide/concepts/hydration.md
@@ -97,16 +97,14 @@ The WebUI Framework plugin emits only these five comment markers. Text bindings,
 Given this template:
 
 ```html
-<template shadowrootmode="open">
-  <h1>{{title}}</h1>
-  <button @click="{toggle()}">Toggle</button>
-  <if condition="visible">
-    <p>Now you see me</p>
-  </if>
-  <for each="item in items">
-    <span data-id="{{item.id}}">{{item.name}}</span>
-  </for>
-</template>
+<h1>{{title}}</h1>
+<button @click="{toggle()}">Toggle</button>
+<if condition="visible">
+  <p>Now you see me</p>
+</if>
+<for each="item in items">
+  <span data-id="{{item.id}}">{{item.name}}</span>
+</for>
 ```
 
 The server renders something like:
@@ -192,16 +190,14 @@ The `webui:hydration-complete` event fires once after every component on the pag
 Both plugins use the **same template syntax** - the difference is in the TypeScript component class, not the template:
 
 ```html
-<template shadowrootmode="open">
-  <h1>{{title}}</h1>
-  <button @click="{onClick()}">Click me</button>
-  <for each="item in items">
-    <p>{{item.name}}</p>
-  </for>
-  <if condition="isVisible">
-    <span>Shown</span>
-  </if>
-</template>
+<h1>{{title}}</h1>
+<button @click="{onClick()}">Click me</button>
+<for each="item in items">
+  <p>{{item.name}}</p>
+</for>
+<if condition="isVisible">
+  <span>Shown</span>
+</if>
 ```
 
 Event binding, interpolation, conditionals, and loops are compiled identically regardless of the hydration plugin. For a complete syntax reference, see [Interactivity](/guide/concepts/interactivity).
diff --git a/docs/guide/concepts/routing.md b/docs/guide/concepts/routing.md
index 36e272b1..113d4986 100644
--- a/docs/guide/concepts/routing.md
+++ b/docs/guide/concepts/routing.md
@@ -29,10 +29,8 @@ Only needed when your app has client-side navigation. Server-only apps with full
 
 ```html
 <!-- app-shell.html -->
-<template shadowrootmode="open">
-  <nav><a href="/">Home</a> <a href="/users">Users</a></nav>
-  <main><outlet /></main>
-</template>
+<nav><a href="/">Home</a> <a href="/users">Users</a></nav>
+<main><outlet /></main>
 ```
 
 **3. Start the router:**
@@ -63,11 +61,9 @@ Routes nest to any depth. Each parent component uses `<outlet />` where its chil
 
 ```html
 <!-- section-page.html -->
-<template shadowrootmode="open">
-  <h2>{{sectionName}}</h2>
-  <nav>topic links...</nav>
-  <outlet />
-</template>
+<h2>{{sectionName}}</h2>
+<nav>topic links...</nav>
+<outlet />
 ```
 
 When navigating between child routes, **parent content is preserved**. Navigating from `/sections/1/topics/react` to `/sections/1/topics/css` only remounts the topic component - the section heading and nav stay.
@@ -339,19 +335,15 @@ Hidden routes use `style="display:none"` inline. If your CSS sets
 
 ```html
 <!-- app-shell.html -->
-<template shadowrootmode="open">
-  <header><nav-bar></nav-bar></header>
-  <main><outlet /></main>
-</template>
+<header><nav-bar></nav-bar></header>
+<main><outlet /></main>
 ```
 
 ```html
 <!-- contacts-page.html -->
-<template shadowrootmode="open">
-  <h2>Contacts</h2>
-  <div class="list">...</div>
-  <outlet />
-</template>
+<h2>Contacts</h2>
+<div class="list">...</div>
+<outlet />
 ```
 
 ```typescript
diff --git a/docs/tutorials/todo-app.md b/docs/tutorials/todo-app.md
index c91334b2..e8a36622 100644
--- a/docs/tutorials/todo-app.md
+++ b/docs/tutorials/todo-app.md
@@ -184,17 +184,15 @@ Key points:
 ### Template – `src/todo-item/todo-item.html`
 
 ```html
-<template shadowrootmode="open">
-  <div class="todo-item" @click="{onClick(e)}">
-    <button class="toggle" data-action="toggle" title="Toggle complete">
-      <if condition="state == 'done'">
-        <span class="check">&#10003;</span>
-      </if>
-    </button>
-    <span class="title">{{title}}</span>
-    <button class="delete" data-action="delete" title="Delete">&times;</button>
-  </div>
-</template>
+<div class="todo-item" @click="{onClick(e)}">
+  <button class="toggle" data-action="toggle" title="Toggle complete">
+    <if condition="state == 'done'">
+      <span class="check">&#10003;</span>
+    </if>
+  </button>
+  <span class="title">{{title}}</span>
+  <button class="delete" data-action="delete" title="Delete">&times;</button>
+</div>
 ```
 
 - **`<if condition="state == 'done'">`** – conditionally renders the checkmark
diff --git a/examples/app/commerce/src/atoms/mp-price/mp-price.html b/examples/app/commerce/src/atoms/mp-price/mp-price.html
index dd493b5b..4fdbf528 100644
--- a/examples/app/commerce/src/atoms/mp-price/mp-price.html
+++ b/examples/app/commerce/src/atoms/mp-price/mp-price.html
@@ -1,6 +1,4 @@
-<template shadowrootmode="open">
-  <span class="price">
-    <span class="amount">{{value}}</span>
-    <span class="currency">{{currencyCode}}</span>
-  </span>
-</template>
+<span class="price">
+  <span class="amount">{{value}}</span>
+  <span class="currency">{{currencyCode}}</span>
+</span>
diff --git a/examples/app/commerce/src/molecules/mp-product-label/mp-product-label.html b/examples/app/commerce/src/molecules/mp-product-label/mp-product-label.html
index 57579c02..09bab84b 100644
--- a/examples/app/commerce/src/molecules/mp-product-label/mp-product-label.html
+++ b/examples/app/commerce/src/molecules/mp-product-label/mp-product-label.html
@@ -1,6 +1,4 @@
-<template shadowrootmode="open">
-  <div class="label">
-    <h3 class="title">{{title}}</h3>
-    <mp-price value="{{price}}" variant="pill" size="{{priceSize}}" currency-code="USD"></mp-price>
-  </div>
-</template>
+<div class="label">
+  <h3 class="title">{{title}}</h3>
+  <mp-price value="{{price}}" variant="pill" size="{{priceSize}}" currency-code="USD"></mp-price>
+</div>
diff --git a/examples/app/commerce/src/organisms/mp-carousel/mp-carousel.html b/examples/app/commerce/src/organisms/mp-carousel/mp-carousel.html
index c541f829..27655eec 100644
--- a/examples/app/commerce/src/organisms/mp-carousel/mp-carousel.html
+++ b/examples/app/commerce/src/organisms/mp-carousel/mp-carousel.html
@@ -1,21 +1,19 @@
-<template shadowrootmode="open">
-  <div class="carousel-wrapper">
-    <ul class="carousel">
-      <for each="product in products">
-        <li class="carousel-item">
-          <mp-product-card
-            handle="{{product.handle}}"
-            title="{{product.title}}"
-            price="{{product.price}}"
-            gradient="{{product.gradient}}"
-            image-url="{{product.imageUrl}}"
-            image-loading="lazy"
-            image-width="384"
-            image-height="384"
-            variant="carousel"
-          ></mp-product-card>
-        </li>
-      </for>
-    </ul>
-  </div>
-</template>
+<div class="carousel-wrapper">
+  <ul class="carousel">
+    <for each="product in products">
+      <li class="carousel-item">
+        <mp-product-card
+          handle="{{product.handle}}"
+          title="{{product.title}}"
+          price="{{product.price}}"
+          gradient="{{product.gradient}}"
+          image-url="{{product.imageUrl}}"
+          image-loading="lazy"
+          image-width="384"
+          image-height="384"
+          variant="carousel"
+        ></mp-product-card>
+      </li>
+    </for>
+  </ul>
+</div>
diff --git a/examples/app/commerce/src/organisms/mp-cart-panel/mp-cart-panel.html b/examples/app/commerce/src/organisms/mp-cart-panel/mp-cart-panel.html
index 79518239..7345390b 100644
--- a/examples/app/commerce/src/organisms/mp-cart-panel/mp-cart-panel.html
+++ b/examples/app/commerce/src/organisms/mp-cart-panel/mp-cart-panel.html
@@ -1,105 +1,103 @@
-<template shadowrootmode="open">
-  <div class="cart-panel" id="cart-popover">
-    <div class="panel-header">
-      <h2 class="panel-title">My Cart</h2>
-      <a href="{{cartCloseHref}}" class="close-btn" aria-label="Close cart" @click="{onCloseClick(e)}">
-        <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-          <path d="M18 6L6 18"></path>
-          <path d="M6 6l12 12"></path>
-        </svg>
-      </a>
-    </div>
+<div class="cart-panel" id="cart-popover">
+  <div class="panel-header">
+    <h2 class="panel-title">My Cart</h2>
+    <a href="{{cartCloseHref}}" class="close-btn" aria-label="Close cart" @click="{onCloseClick(e)}">
+      <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+        <path d="M18 6L6 18"></path>
+        <path d="M6 6l12 12"></path>
+      </svg>
+    </a>
+  </div>
 
-    <if condition="cartItems.length == 0">
-      <div class="empty-state">
-        <svg class="empty-cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"></path>
-          <line x1="3" y1="6" x2="21" y2="6"></line>
-          <path d="M16 10a4 4 0 01-8 0"></path>
-        </svg>
-        <p class="empty-text">Your cart is empty.</p>
-      </div>
-    </if>
+  <if condition="cartItems.length == 0">
+    <div class="empty-state">
+      <svg class="empty-cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"></path>
+        <line x1="3" y1="6" x2="21" y2="6"></line>
+        <path d="M16 10a4 4 0 01-8 0"></path>
+      </svg>
+      <p class="empty-text">Your cart is empty.</p>
+    </div>
+  </if>
 
-    <if condition="cartItems.length">
-      <div class="cart-content">
-          <ul class="cart-items">
-            <for each="item in cartItems">
-              <li class="cart-line">
-                <div class="item-image">
-                  <button
-                    class="remove-btn"
-                    type="button"
-                    data-handle="{{item.handle}}"
-                    data-color="{{item.color}}"
-                    data-size="{{item.size}}"
-                    data-quantity="0"
-                    aria-label="Remove cart item"
-                    @click="{onQuantityClick(e)}"
-                  >
-                    <svg class="remove-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                      <path d="M18 6L6 18"></path>
-                      <path d="M6 6l12 12"></path>
-                    </svg>
-                  </button>
-                  <mp-product-image gradient="{{item.gradient}}" image-url="{{item.imageUrl}}" alt="{{item.title}}" loading="lazy" decoding="async" proxy-width="64" proxy-height="64"></mp-product-image>
-                </div>
-                <div class="item-info">
-                  <a href="/product/{{item.handle}}" class="item-title">{{item.title}}</a>
-                  <if condition="item.variantLabel">
-                    <p class="item-variant">{{item.variantLabel}}</p>
-                  </if>
-                </div>
-                <div class="item-actions">
-                  <div class="item-price">
-                    <mp-price value="{{item.price}}" variant="plain" size="sm" currency-code="USD"></mp-price>
-                  </div>
-                  <div class="qty-control">
-                  <form method="post" action="/cart/update" class="qty-form">
-                    <input type="hidden" name="handle" value="{{item.handle}}" />
-                    <input type="hidden" name="color" value="{{item.color}}" />
-                    <input type="hidden" name="size" value="{{item.size}}" />
-                     <input type="hidden" name="redirectTo" value="{{item.redirectTo}}" />
-                     <input type="hidden" name="openCart" value="true" />
-                     <button class="qty-btn" type="submit" name="quantity" value="{{item.decreaseTo}}" data-handle="{{item.handle}}" data-color="{{item.color}}" data-size="{{item.size}}" data-quantity="{{item.decreaseTo}}" @click="{onQuantityClick(e)}">
-                       <svg class="qty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                         <path d="M5 12h14"></path>
-                       </svg>
-                     </button>
-                   </form>
-                  <span class="qty-count">{{item.quantity}}</span>
-                  <form method="post" action="/cart/update" class="qty-form">
-                    <input type="hidden" name="handle" value="{{item.handle}}" />
-                    <input type="hidden" name="color" value="{{item.color}}" />
-                    <input type="hidden" name="size" value="{{item.size}}" />
-                     <input type="hidden" name="redirectTo" value="{{item.redirectTo}}" />
-                     <input type="hidden" name="openCart" value="true" />
-                      <button class="qty-btn" type="submit" name="quantity" value="{{item.increaseTo}}" data-handle="{{item.handle}}" data-color="{{item.color}}" data-size="{{item.size}}" data-quantity="{{item.increaseTo}}" @click="{onQuantityClick(e)}">
-                       <svg class="qty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                         <path d="M12 5v14"></path>
-                         <path d="M5 12h14"></path>
-                       </svg>
-                     </button>
-                   </form>
+  <if condition="cartItems.length">
+    <div class="cart-content">
+        <ul class="cart-items">
+          <for each="item in cartItems">
+            <li class="cart-line">
+              <div class="item-image">
+                <button
+                  class="remove-btn"
+                  type="button"
+                  data-handle="{{item.handle}}"
+                  data-color="{{item.color}}"
+                  data-size="{{item.size}}"
+                  data-quantity="0"
+                  aria-label="Remove cart item"
+                  @click="{onQuantityClick(e)}"
+                >
+                  <svg class="remove-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <path d="M18 6L6 18"></path>
+                    <path d="M6 6l12 12"></path>
+                  </svg>
+                </button>
+                <mp-product-image gradient="{{item.gradient}}" image-url="{{item.imageUrl}}" alt="{{item.title}}" loading="lazy" decoding="async" proxy-width="64" proxy-height="64"></mp-product-image>
+              </div>
+              <div class="item-info">
+                <a href="/product/{{item.handle}}" class="item-title">{{item.title}}</a>
+                <if condition="item.variantLabel">
+                  <p class="item-variant">{{item.variantLabel}}</p>
+                </if>
+              </div>
+              <div class="item-actions">
+                <div class="item-price">
+                  <mp-price value="{{item.price}}" variant="plain" size="sm" currency-code="USD"></mp-price>
                 </div>
+                <div class="qty-control">
+                <form method="post" action="/cart/update" class="qty-form">
+                  <input type="hidden" name="handle" value="{{item.handle}}" />
+                  <input type="hidden" name="color" value="{{item.color}}" />
+                  <input type="hidden" name="size" value="{{item.size}}" />
+                   <input type="hidden" name="redirectTo" value="{{item.redirectTo}}" />
+                   <input type="hidden" name="openCart" value="true" />
+                   <button class="qty-btn" type="submit" name="quantity" value="{{item.decreaseTo}}" data-handle="{{item.handle}}" data-color="{{item.color}}" data-size="{{item.size}}" data-quantity="{{item.decreaseTo}}" @click="{onQuantityClick(e)}">
+                     <svg class="qty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                       <path d="M5 12h14"></path>
+                     </svg>
+                   </button>
+                 </form>
+                <span class="qty-count">{{item.quantity}}</span>
+                <form method="post" action="/cart/update" class="qty-form">
+                  <input type="hidden" name="handle" value="{{item.handle}}" />
+                  <input type="hidden" name="color" value="{{item.color}}" />
+                  <input type="hidden" name="size" value="{{item.size}}" />
+                   <input type="hidden" name="redirectTo" value="{{item.redirectTo}}" />
+                   <input type="hidden" name="openCart" value="true" />
+                    <button class="qty-btn" type="submit" name="quantity" value="{{item.increaseTo}}" data-handle="{{item.handle}}" data-color="{{item.color}}" data-size="{{item.size}}" data-quantity="{{item.increaseTo}}" @click="{onQuantityClick(e)}">
+                     <svg class="qty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                       <path d="M12 5v14"></path>
+                       <path d="M5 12h14"></path>
+                     </svg>
+                   </button>
+                 </form>
               </div>
-            </li>
-          </for>
-        </ul>
-        <div class="cart-footer">
-          <div class="total-row total-breakdown">
-            <span>Taxes</span>
-            <span class="total-value total-price"><span>{{taxes}}</span><span class="currency-label">USD</span></span>
-          </div>
-          <div class="total-row shipping-row"><span>Shipping</span><span class="total-value">Calculated at checkout</span></div>
-          <div class="total-row total-final">
-            <span>Total</span>
-            <span class="total-value total-price"><span>{{subtotal}}</span><span class="currency-label">USD</span></span>
-          </div>
-          <button class="checkout-btn">Proceed to Checkout</button>
+            </div>
+          </li>
+        </for>
+      </ul>
+      <div class="cart-footer">
+        <div class="total-row total-breakdown">
+          <span>Taxes</span>
+          <span class="total-value total-price"><span>{{taxes}}</span><span class="currency-label">USD</span></span>
+        </div>
+        <div class="total-row shipping-row"><span>Shipping</span><span class="total-value">Calculated at checkout</span></div>
+        <div class="total-row total-final">
+          <span>Total</span>
+          <span class="total-value total-price"><span>{{subtotal}}</span><span class="currency-label">USD</span></span>
         </div>
+        <button class="checkout-btn">Proceed to Checkout</button>
       </div>
-    </if>
-  </div>
-  <a href="{{cartCloseHref}}" class="backdrop" aria-label="Close cart" @click="{onBackdropClick(e)}"></a>
-</template>
+    </div>
+  </if>
+</div>
+<a href="{{cartCloseHref}}" class="backdrop" aria-label="Close cart" @click="{onBackdropClick(e)}"></a>
diff --git a/examples/app/commerce/src/organisms/mp-footer/mp-footer.html b/examples/app/commerce/src/organisms/mp-footer/mp-footer.html
index cce77eeb..83a07c90 100644
--- a/examples/app/commerce/src/organisms/mp-footer/mp-footer.html
+++ b/examples/app/commerce/src/organisms/mp-footer/mp-footer.html
@@ -1,55 +1,53 @@
-<template shadowrootmode="open">
-  <footer class="footer">
-    <div class="footer-upper">
-      <div class="footer-brand-col">
-        <a href="/" class="brand-link">
-          <span class="brand-logo">
-            <svg
-              class="brand-mark"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-label="Acme Store logo"
-              viewBox="0 0 32 28"
-            >
-              <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z"></path>
-              <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z"></path>
-            </svg>
-          </span>
-          <span class="brand-name">ACME STORE</span>
-        </a>
-      </div>
-      <nav class="footer-nav">
-        <a href="/" class="nav-link">Home</a>
-        <a href="/about" class="nav-link">About</a>
-        <a href="/terms-conditions" class="nav-link">Terms &amp; Conditions</a>
-        <a href="/shipping-return-policy" class="nav-link">Shipping &amp; Return Policy</a>
-        <a href="/privacy-policy" class="nav-link">Privacy Policy</a>
-        <a href="/frequently-asked-questions" class="nav-link">FAQ</a>
-      </nav>
-      <div class="footer-cta">
-        <a
-          href="https://github.com/microsoft/webui"
-          class="deploy-btn"
-          target="_blank"
-          rel="noopener"
-          aria-label="Microsoft WebUI Framework"
-        >
-          <span class="deploy-icon">🔥</span>
-          <span class="deploy-divider"></span>
-          <span class="deploy-text">Use WebUI Framework</span>
-        </a>
-      </div>
+<footer class="footer">
+  <div class="footer-upper">
+    <div class="footer-brand-col">
+      <a href="/" class="brand-link">
+        <span class="brand-logo">
+          <svg
+            class="brand-mark"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="Acme Store logo"
+            viewBox="0 0 32 28"
+          >
+            <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z"></path>
+            <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z"></path>
+          </svg>
+        </span>
+        <span class="brand-name">ACME STORE</span>
+      </a>
     </div>
-    <div class="footer-lower">
-      <div class="footer-lower-inner">
-        <p class="footer-copy">© 2026 ACME, Inc. All rights reserved.</p>
-        <span class="separator" aria-hidden="true"></span>
-        <p class="source-wrap">
-          <a href="https://github.com/microsoft/webui/examples/app/commerce" class="source-link" target="_blank" rel="noopener">View the source</a>
-        </p>
-        <p class="created-by-wrap">
-          <a href="https://github.com/microsoft/webui" class="created-by" target="_blank" rel="noopener">Created by Microsoft</a>
-        </p>
-      </div>
+    <nav class="footer-nav">
+      <a href="/" class="nav-link">Home</a>
+      <a href="/about" class="nav-link">About</a>
+      <a href="/terms-conditions" class="nav-link">Terms &amp; Conditions</a>
+      <a href="/shipping-return-policy" class="nav-link">Shipping &amp; Return Policy</a>
+      <a href="/privacy-policy" class="nav-link">Privacy Policy</a>
+      <a href="/frequently-asked-questions" class="nav-link">FAQ</a>
+    </nav>
+    <div class="footer-cta">
+      <a
+        href="https://github.com/microsoft/webui"
+        class="deploy-btn"
+        target="_blank"
+        rel="noopener"
+        aria-label="Microsoft WebUI Framework"
+      >
+        <span class="deploy-icon">🔥</span>
+        <span class="deploy-divider"></span>
+        <span class="deploy-text">Use WebUI Framework</span>
+      </a>
     </div>
-  </footer>
-</template>
+  </div>
+  <div class="footer-lower">
+    <div class="footer-lower-inner">
+      <p class="footer-copy">© 2026 ACME, Inc. All rights reserved.</p>
+      <span class="separator" aria-hidden="true"></span>
+      <p class="source-wrap">
+        <a href="https://github.com/microsoft/webui/examples/app/commerce" class="source-link" target="_blank" rel="noopener">View the source</a>
+      </p>
+      <p class="created-by-wrap">
+        <a href="https://github.com/microsoft/webui" class="created-by" target="_blank" rel="noopener">Created by Microsoft</a>
+      </p>
+    </div>
+  </div>
+</footer>
diff --git a/examples/app/commerce/src/organisms/mp-hero-grid/mp-hero-grid.html b/examples/app/commerce/src/organisms/mp-hero-grid/mp-hero-grid.html
index b3b3a160..f118ace1 100644
--- a/examples/app/commerce/src/organisms/mp-hero-grid/mp-hero-grid.html
+++ b/examples/app/commerce/src/organisms/mp-hero-grid/mp-hero-grid.html
@@ -1,20 +1,18 @@
-<template shadowrootmode="open">
-  <section class="grid">
-    <for each="product in products">
-      <div class="grid-item">
-        <mp-product-card
-          handle="{{product.handle}}"
-          title="{{product.title}}"
-          price="{{product.price}}"
-          gradient="{{product.gradient}}"
-          image-url="{{product.imageUrl}}"
-          image-loading="{{product.imageLoading}}"
-          image-fetch-priority="{{product.fetchPriority}}"
-          image-width="{{product.imageWidth}}"
-          image-height="{{product.imageHeight}}"
-          variant="hero"
-        ></mp-product-card>
-      </div>
-    </for>
-  </section>
-</template>
+<section class="grid">
+  <for each="product in products">
+    <div class="grid-item">
+      <mp-product-card
+        handle="{{product.handle}}"
+        title="{{product.title}}"
+        price="{{product.price}}"
+        gradient="{{product.gradient}}"
+        image-url="{{product.imageUrl}}"
+        image-loading="{{product.imageLoading}}"
+        image-fetch-priority="{{product.fetchPriority}}"
+        image-width="{{product.imageWidth}}"
+        image-height="{{product.imageHeight}}"
+        variant="hero"
+      ></mp-product-card>
+    </div>
+  </for>
+</section>
diff --git a/examples/app/commerce/src/organisms/mp-product-gallery/mp-product-gallery.html b/examples/app/commerce/src/organisms/mp-product-gallery/mp-product-gallery.html
index c235242d..4ee482df 100644
--- a/examples/app/commerce/src/organisms/mp-product-gallery/mp-product-gallery.html
+++ b/examples/app/commerce/src/organisms/mp-product-gallery/mp-product-gallery.html
@@ -1,37 +1,35 @@
-<template shadowrootmode="open">
-  <div class="gallery">
-    <div class="main-image">
-      <mp-product-image
-        class="image-display"
-        gradient="{{activeGradient}}"
-        image-url="{{activeImageUrl}}"
-        alt=""
-        loading="eager"
-        decoding="async"
-        fetch-priority="high"
-        proxy-width="1080"
-        proxy-height="1080"
-      ></mp-product-image>
-      <div class="nav-buttons">
-        <button class="nav-btn" aria-label="Previous image" @click="{onPreviousClick()}">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M15 18l-6-6 6-6"></path>
-          </svg>
-        </button>
-        <div class="separator"></div>
-        <button class="nav-btn" aria-label="Next image" @click="{onNextClick()}">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M9 18l6-6-6-6"></path>
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div class="thumbnails">
-      <for each="img in images">
-        <button class="thumb" ?active="{{img.index == activeIndex}}" data-index="{{img.index}}" @click="{onThumbnailClick(e)}">
-          <mp-product-image gradient="{{img.gradient}}" image-url="{{img.imageUrl}}" alt="" loading="lazy" decoding="async" proxy-width="96" proxy-height="96"></mp-product-image>
-        </button>
-      </for>
+<div class="gallery">
+  <div class="main-image">
+    <mp-product-image
+      class="image-display"
+      gradient="{{activeGradient}}"
+      image-url="{{activeImageUrl}}"
+      alt=""
+      loading="eager"
+      decoding="async"
+      fetch-priority="high"
+      proxy-width="1080"
+      proxy-height="1080"
+    ></mp-product-image>
+    <div class="nav-buttons">
+      <button class="nav-btn" aria-label="Previous image" @click="{onPreviousClick()}">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M15 18l-6-6 6-6"></path>
+        </svg>
+      </button>
+      <div class="separator"></div>
+      <button class="nav-btn" aria-label="Next image" @click="{onNextClick()}">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M9 18l6-6-6-6"></path>
+        </svg>
+      </button>
     </div>
   </div>
-</template>
+  <div class="thumbnails">
+    <for each="img in images">
+      <button class="thumb" ?active="{{img.index == activeIndex}}" data-index="{{img.index}}" @click="{onThumbnailClick(e)}">
+        <mp-product-image gradient="{{img.gradient}}" image-url="{{img.imageUrl}}" alt="" loading="lazy" decoding="async" proxy-width="96" proxy-height="96"></mp-product-image>
+      </button>
+    </for>
+  </div>
+</div>
diff --git a/examples/app/commerce/src/organisms/mp-product-grid/mp-product-grid.html b/examples/app/commerce/src/organisms/mp-product-grid/mp-product-grid.html
index 8720892a..befe44a6 100644
--- a/examples/app/commerce/src/organisms/mp-product-grid/mp-product-grid.html
+++ b/examples/app/commerce/src/organisms/mp-product-grid/mp-product-grid.html
@@ -1,21 +1,19 @@
-<template shadowrootmode="open">
-  <if condition="products.length == 0 && query">
-    <p class="empty-results">There are no products that match "<strong>{{query}}</strong>"</p>
-  </if>
-  <div class="grid">
-    <for each="product in products">
-      <mp-product-card
-        handle="{{product.handle}}"
-        title="{{product.title}}"
-        price="{{product.price}}"
-        gradient="{{product.gradient}}"
-        image-url="{{product.imageUrl}}"
-        image-loading="{{product.imageLoading}}"
-        image-fetch-priority="{{product.fetchPriority}}"
-        image-width="640"
-        image-height="640"
-        variant="grid"
-      ></mp-product-card>
-    </for>
-  </div>
-</template>
+<if condition="products.length == 0 && query">
+  <p class="empty-results">There are no products that match "<strong>{{query}}</strong>"</p>
+</if>
+<div class="grid">
+  <for each="product in products">
+    <mp-product-card
+      handle="{{product.handle}}"
+      title="{{product.title}}"
+      price="{{product.price}}"
+      gradient="{{product.gradient}}"
+      image-url="{{product.imageUrl}}"
+      image-loading="{{product.imageLoading}}"
+      image-fetch-priority="{{product.fetchPriority}}"
+      image-width="640"
+      image-height="640"
+      variant="grid"
+    ></mp-product-card>
+  </for>
+</div>
diff --git a/examples/app/commerce/src/pages/mp-page-about/mp-page-about.html b/examples/app/commerce/src/pages/mp-page-about/mp-page-about.html
index a3c661d8..86720f29 100644
--- a/examples/app/commerce/src/pages/mp-page-about/mp-page-about.html
+++ b/examples/app/commerce/src/pages/mp-page-about/mp-page-about.html
@@ -1,14 +1,12 @@
-<template shadowrootmode="open">
-  <div class="page-content">
-    <h1 class="page-title">About</h1>
-    <div class="prose">
-      <p>ACME Store is the WebUI commerce demo rebuilt around a single Rust server using Microsoft WebUI Framework. The same process now owns static assets, server-side rendering, JSON partial navigation, and the cookie-backed cart.</p>
-      <h2>What This Demo Proves</h2>
-      <ul>
-        <li>Full SSR first, then client navigation on top of the same route tree</li>
-        <li>Progressive enhancement for search, navigation, and cart mutations</li>
-        <li>Route-aware partial template delivery without relying on <code>webui serve</code> in production</li>
-      </ul>
-    </div>
+<div class="page-content">
+  <h1 class="page-title">About</h1>
+  <div class="prose">
+    <p>ACME Store is the WebUI commerce demo rebuilt around a single Rust server using Microsoft WebUI Framework. The same process now owns static assets, server-side rendering, JSON partial navigation, and the cookie-backed cart.</p>
+    <h2>What This Demo Proves</h2>
+    <ul>
+      <li>Full SSR first, then client navigation on top of the same route tree</li>
+      <li>Progressive enhancement for search, navigation, and cart mutations</li>
+      <li>Route-aware partial template delivery without relying on <code>webui serve</code> in production</li>
+    </ul>
   </div>
-</template>
+</div>
diff --git a/examples/app/commerce/src/pages/mp-page-faq/mp-page-faq.html b/examples/app/commerce/src/pages/mp-page-faq/mp-page-faq.html
index 47489abe..8b503861 100644
--- a/examples/app/commerce/src/pages/mp-page-faq/mp-page-faq.html
+++ b/examples/app/commerce/src/pages/mp-page-faq/mp-page-faq.html
@@ -1,11 +1,9 @@
-<template shadowrootmode="open">
-  <div class="page-content">
-    <h1 class="page-title">Frequently Asked Questions</h1>
-    <div class="prose">
-      <h2>Why does this store matter?</h2>
-      <p>It shows how WebUI can drive a polished commerce shell with SSR, partial routes, and interactive cart behavior from a single Rust host.</p>
-      <h2>Does the cart survive refreshes?</h2>
-      <p>Yes. Cart lines are stored in a first-party cookie and resolved against the catalog on every request.</p>
-    </div>
+<div class="page-content">
+  <h1 class="page-title">Frequently Asked Questions</h1>
+  <div class="prose">
+    <h2>Why does this store matter?</h2>
+    <p>It shows how WebUI can drive a polished commerce shell with SSR, partial routes, and interactive cart behavior from a single Rust host.</p>
+    <h2>Does the cart survive refreshes?</h2>
+    <p>Yes. Cart lines are stored in a first-party cookie and resolved against the catalog on every request.</p>
   </div>
-</template>
+</div>
diff --git a/examples/app/commerce/src/pages/mp-page-home/mp-page-home.html b/examples/app/commerce/src/pages/mp-page-home/mp-page-home.html
index c3871327..7cc7dfea 100644
--- a/examples/app/commerce/src/pages/mp-page-home/mp-page-home.html
+++ b/examples/app/commerce/src/pages/mp-page-home/mp-page-home.html
@@ -1,9 +1,7 @@
-<template shadowrootmode="open">
-  <section class="hero-section">
-    <mp-hero-grid :products="{{featuredProducts}}"></mp-hero-grid>
-  </section>
+<section class="hero-section">
+  <mp-hero-grid :products="{{featuredProducts}}"></mp-hero-grid>
+</section>
 
-  <section class="carousel-section">
-    <mp-carousel :products="{{carouselProducts}}"></mp-carousel>
-  </section>
-</template>
+<section class="carousel-section">
+  <mp-carousel :products="{{carouselProducts}}"></mp-carousel>
+</section>
diff --git a/examples/app/commerce/src/pages/mp-page-privacy/mp-page-privacy.html b/examples/app/commerce/src/pages/mp-page-privacy/mp-page-privacy.html
index c462dc01..9459045c 100644
--- a/examples/app/commerce/src/pages/mp-page-privacy/mp-page-privacy.html
+++ b/examples/app/commerce/src/pages/mp-page-privacy/mp-page-privacy.html
@@ -1,9 +1,7 @@
-<template shadowrootmode="open">
-  <div class="page-content">
-    <h1 class="page-title">Privacy Policy</h1>
-    <div class="prose">
-      <p>The only persisted state in this demo is the cart cookie used to survive refreshes and server-render the cart contents back into the page.</p>
-      <p>No analytics, tracking pixels, or third-party cookies are included.</p>
-    </div>
+<div class="page-content">
+  <h1 class="page-title">Privacy Policy</h1>
+  <div class="prose">
+    <p>The only persisted state in this demo is the cart cookie used to survive refreshes and server-render the cart contents back into the page.</p>
+    <p>No analytics, tracking pixels, or third-party cookies are included.</p>
   </div>
-</template>
+</div>
diff --git a/examples/app/commerce/src/pages/mp-page-product/mp-page-product.html b/examples/app/commerce/src/pages/mp-page-product/mp-page-product.html
index eafdadff..27960f89 100644
--- a/examples/app/commerce/src/pages/mp-page-product/mp-page-product.html
+++ b/examples/app/commerce/src/pages/mp-page-product/mp-page-product.html
@@ -1,64 +1,62 @@
-<template shadowrootmode="open">
-  <div class="product-layout">
-    <div class="product-container">
-      <div class="product-gallery-col">
-        <mp-product-gallery
-          handle="{{handle}}"
-          active-gradient="{{gradient}}"
-          active-image-url="{{imageUrl}}"
-          :images="{{images}}"
-        ></mp-product-gallery>
-      </div>
+<div class="product-layout">
+  <div class="product-container">
+    <div class="product-gallery-col">
+      <mp-product-gallery
+        handle="{{handle}}"
+        active-gradient="{{gradient}}"
+        active-image-url="{{imageUrl}}"
+        :images="{{images}}"
+      ></mp-product-gallery>
+    </div>
 
-      <div class="product-info-col">
-        <h1 class="product-title">{{productTitle}}</h1>
+    <div class="product-info-col">
+      <h1 class="product-title">{{productTitle}}</h1>
 
-        <div class="product-price-row">
-          <mp-price value="{{price}}" variant="pill" size="md" currency-code="USD"></mp-price>
-          <if condition="hasCompareAt">
-            <span class="product-price-compare">{{compareAt}}</span>
-          </if>
-        </div>
+      <div class="product-price-row">
+        <mp-price value="{{price}}" variant="pill" size="md" currency-code="USD"></mp-price>
+        <if condition="hasCompareAt">
+          <span class="product-price-compare">{{compareAt}}</span>
+        </if>
+      </div>
 
-        <mp-variant-selector
-          :option-groups="{{optionGroups}}"
-          @variant-select="{onVariantSelect(e)}"
-        ></mp-variant-selector>
+      <mp-variant-selector
+        :option-groups="{{optionGroups}}"
+        @variant-select="{onVariantSelect(e)}"
+      ></mp-variant-selector>
 
-        <div class="product-description">{{{descriptionHtml}}}</div>
+      <div class="product-description">{{{descriptionHtml}}}</div>
 
-        <mp-add-to-cart
-          handle="{{handle}}"
-          product-title="{{productTitle}}"
-          price="{{price}}"
-          gradient="{{gradient}}"
-          image-url="{{imageUrl}}"
-          default-color="{{defaultColor}}"
-          default-size="{{defaultSize}}"
-          selected-color="{{selectedColor}}"
-          selected-size="{{selectedSize}}"
-          current-path="{{currentPath}}"
-        ></mp-add-to-cart>
-      </div>
+      <mp-add-to-cart
+        handle="{{handle}}"
+        product-title="{{productTitle}}"
+        price="{{price}}"
+        gradient="{{gradient}}"
+        image-url="{{imageUrl}}"
+        default-color="{{defaultColor}}"
+        default-size="{{defaultSize}}"
+        selected-color="{{selectedColor}}"
+        selected-size="{{selectedSize}}"
+        current-path="{{currentPath}}"
+      ></mp-add-to-cart>
     </div>
-
-    <section class="related-section">
-      <h2 class="related-heading">Related Products</h2>
-      <div class="related-scroll">
-        <for each="rel in relatedProducts">
-          <mp-product-card
-            handle="{{rel.handle}}"
-            title="{{rel.title}}"
-            price="{{rel.price}}"
-            gradient="{{rel.gradient}}"
-            image-url="{{rel.imageUrl}}"
-            image-loading="lazy"
-            image-width="384"
-            image-height="384"
-            variant="related"
-          ></mp-product-card>
-        </for>
-      </div>
-    </section>
   </div>
-</template>
+
+  <section class="related-section">
+    <h2 class="related-heading">Related Products</h2>
+    <div class="related-scroll">
+      <for each="rel in relatedProducts">
+        <mp-product-card
+          handle="{{rel.handle}}"
+          title="{{rel.title}}"
+          price="{{rel.price}}"
+          gradient="{{rel.gradient}}"
+          image-url="{{rel.imageUrl}}"
+          image-loading="lazy"
+          image-width="384"
+          image-height="384"
+          variant="related"
+        ></mp-product-card>
+      </for>
+    </div>
+  </section>
+</div>
diff --git a/examples/app/commerce/src/pages/mp-page-search/mp-page-search.html b/examples/app/commerce/src/pages/mp-page-search/mp-page-search.html
index cb9ed792..7a5c42dc 100644
--- a/examples/app/commerce/src/pages/mp-page-search/mp-page-search.html
+++ b/examples/app/commerce/src/pages/mp-page-search/mp-page-search.html
@@ -1,13 +1,11 @@
-<template shadowrootmode="open">
-  <mp-category-nav
-    ?all-active="{{allActive}}"
-    current-label="{{currentCategoryLabel}}"
-    :categories="{{categories}}"
-  ></mp-category-nav>
+<mp-category-nav
+  ?all-active="{{allActive}}"
+  current-label="{{currentCategoryLabel}}"
+  :categories="{{categories}}"
+></mp-category-nav>
 
-  <div class="product-area">
-    <outlet />
-  </div>
+<div class="product-area">
+  <outlet />
+</div>
 
-  <mp-filter-list :sort-options="{{sortOptions}}"></mp-filter-list>
-</template>
+<mp-filter-list :sort-options="{{sortOptions}}"></mp-filter-list>
diff --git a/examples/app/commerce/src/pages/mp-page-shipping/mp-page-shipping.html b/examples/app/commerce/src/pages/mp-page-shipping/mp-page-shipping.html
index 42bf6260..bba7d34b 100644
--- a/examples/app/commerce/src/pages/mp-page-shipping/mp-page-shipping.html
+++ b/examples/app/commerce/src/pages/mp-page-shipping/mp-page-shipping.html
@@ -1,8 +1,6 @@
-<template shadowrootmode="open">
-  <div class="page-content">
-    <h1 class="page-title">Shipping &amp; Return Policy</h1>
-    <div class="prose">
-      <p>This is a demo storefront, so no real shipments leave a warehouse. The layout mirrors a production cart flow, but checkout remains illustrative only.</p>
-    </div>
+<div class="page-content">
+  <h1 class="page-title">Shipping &amp; Return Policy</h1>
+  <div class="prose">
+    <p>This is a demo storefront, so no real shipments leave a warehouse. The layout mirrors a production cart flow, but checkout remains illustrative only.</p>
   </div>
-</template>
+</div>
diff --git a/examples/app/commerce/src/pages/mp-page-terms/mp-page-terms.html b/examples/app/commerce/src/pages/mp-page-terms/mp-page-terms.html
index 2c0557e7..8511e043 100644
--- a/examples/app/commerce/src/pages/mp-page-terms/mp-page-terms.html
+++ b/examples/app/commerce/src/pages/mp-page-terms/mp-page-terms.html
@@ -1,9 +1,7 @@
-<template shadowrootmode="open">
-  <div class="page-content">
-    <h1 class="page-title">Terms &amp; Conditions</h1>
-    <div class="prose">
-      <p>This site is a framework demonstration. No real transactions are processed and no physical orders are fulfilled.</p>
-      <p>You may use this demo for evaluation, learning, and local experimentation with WebUI.</p>
-    </div>
+<div class="page-content">
+  <h1 class="page-title">Terms &amp; Conditions</h1>
+  <div class="prose">
+    <p>This site is a framework demonstration. No real transactions are processed and no physical orders are fulfilled.</p>
+    <p>You may use this demo for evaluation, learning, and local experimentation with WebUI.</p>
   </div>
-</template>
+</div>
diff --git a/examples/app/routes/src/lesson-page/lesson-page.html b/examples/app/routes/src/lesson-page/lesson-page.html
index 0769c34d..cba28ed0 100644
--- a/examples/app/routes/src/lesson-page/lesson-page.html
+++ b/examples/app/routes/src/lesson-page/lesson-page.html
@@ -1,5 +1,3 @@
-<template shadowrootmode="open">
-  <h4>{{lessonName}}</h4>
-  <div class="breadcrumb">{{sectionName}} › {{topicName}} › {{lessonName}}</div>
-  <p>{{lessonContent}}</p>
-</template>
\ No newline at end of file
+<h4>{{lessonName}}</h4>
+<div class="breadcrumb">{{sectionName}} › {{topicName}} › {{lessonName}}</div>
+<p>{{lessonContent}}</p>
diff --git a/packages/webui-framework/tests/fixtures/README.md b/packages/webui-framework/tests/fixtures/README.md
index 32911083..c9cb4ec8 100644
--- a/packages/webui-framework/tests/fixtures/README.md
+++ b/packages/webui-framework/tests/fixtures/README.md
@@ -42,12 +42,10 @@ Static files (JS bundles, CSS) are served from the fixtures root as-is.
 
 ```html
 <!-- Component template (shadow DOM) -->
-<template shadowrootmode="open">
-  <span>{{propertyName}}</span>
-  <button @click="{handler()}">Click</button>
-  <if condition="show"><p>Visible</p></if>
-  <for each="item in items"><li>{{item.name}}</li></for>
-</template>
+<span>{{propertyName}}</span>
+<button @click="{handler()}">Click</button>
+<if condition="show"><p>Visible</p></if>
+<for each="item in items"><li>{{item.name}}</li></for>
 ```
 
 ### State
diff --git a/packages/webui-framework/tests/fixtures/attr/src/test-attr/test-attr.html b/packages/webui-framework/tests/fixtures/attr/src/test-attr/test-attr.html
index d26fe980..81dee495 100644
--- a/packages/webui-framework/tests/fixtures/attr/src/test-attr/test-attr.html
+++ b/packages/webui-framework/tests/fixtures/attr/src/test-attr/test-attr.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <button class="noop" @click="{noop()}">Toggle</button><a class="logo" href="/" @click="{noop()}">Home</a><span class="label">{{label}}</span><span class="display">{{displayValue}}</span><a class="cta" href="{{ctaHref}}">Open</a><div class="bool-target" ?data-active="{{isActive}}"></div><input class="bool-check" type="checkbox" ?checked="{{isActive}}" /><a class="mixed" href="/items/{{itemId}}">Item</a><span class="mixed-class" data-tag="prefix-{{tag}}-suffix">Mixed</span>
-</template>
+<button class="noop" @click="{noop()}">Toggle</button><a class="logo" href="/" @click="{noop()}">Home</a><span class="label">{{label}}</span><span class="display">{{displayValue}}</span><a class="cta" href="{{ctaHref}}">Open</a><div class="bool-target" ?data-active="{{isActive}}"></div><input class="bool-check" type="checkbox" ?checked="{{isActive}}" /><a class="mixed" href="/items/{{itemId}}">Item</a><span class="mixed-class" data-tag="prefix-{{tag}}-suffix">Mixed</span>
diff --git a/packages/webui-framework/tests/fixtures/basics/src/test-basics/test-basics.html b/packages/webui-framework/tests/fixtures/basics/src/test-basics/test-basics.html
index e7fdc446..c981e03b 100644
--- a/packages/webui-framework/tests/fixtures/basics/src/test-basics/test-basics.html
+++ b/packages/webui-framework/tests/fixtures/basics/src/test-basics/test-basics.html
@@ -1,10 +1,8 @@
-<template shadowrootmode="open">
-  <span class="greeting">{{greeting}}</span>, <span class="name">{{name}}</span>!
-  <span class="count">{{count}}</span> (<span class="doubled">{{doubled}}</span>)
-  <button class="inc" @click="{increment()}">+</button>
-  <button class="dec" @click="{decrement()}">-</button>
-  <button class="reset" @click="{onReset()}">Reset</button>
-  <input class="text-input" @input="{onInput(e)}" @keydown="{onKeydown(e)}" />
-  <span class="last-key">{{lastKey}}</span>
-  <span class="input-value">{{inputValue}}</span>
-</template>
+<span class="greeting">{{greeting}}</span>, <span class="name">{{name}}</span>!
+<span class="count">{{count}}</span> (<span class="doubled">{{doubled}}</span>)
+<button class="inc" @click="{increment()}">+</button>
+<button class="dec" @click="{decrement()}">-</button>
+<button class="reset" @click="{onReset()}">Reset</button>
+<input class="text-input" @input="{onInput(e)}" @keydown="{onKeydown(e)}" />
+<span class="last-key">{{lastKey}}</span>
+<span class="input-value">{{inputValue}}</span>
diff --git a/packages/webui-framework/tests/fixtures/bench/src/test-bench-events/test-bench-events.html b/packages/webui-framework/tests/fixtures/bench/src/test-bench-events/test-bench-events.html
index dfcaa8f7..b04ad70f 100644
--- a/packages/webui-framework/tests/fixtures/bench/src/test-bench-events/test-bench-events.html
+++ b/packages/webui-framework/tests/fixtures/bench/src/test-bench-events/test-bench-events.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <button class="run-events" @click="{runEventBench()}"></button><div class="event-list"><for each="item in items"><div class="event-item"><button class="a" @click="{onA()}"></button><button class="b" @click="{onB()}"></button><button class="c" @click="{onC()}"></button><button class="d" @click="{onD()}"></button><button class="e" @click="{onE()}"></button></div></for></div>
-</template>
+<button class="run-events" @click="{runEventBench()}"></button><div class="event-list"><for each="item in items"><div class="event-item"><button class="a" @click="{onA()}"></button><button class="b" @click="{onB()}"></button><button class="c" @click="{onC()}"></button><button class="d" @click="{onD()}"></button><button class="e" @click="{onE()}"></button></div></for></div>
diff --git a/packages/webui-framework/tests/fixtures/bench/src/test-bench-repeat/test-bench-repeat.html b/packages/webui-framework/tests/fixtures/bench/src/test-bench-repeat/test-bench-repeat.html
index 4273af8a..0bb5d9bb 100644
--- a/packages/webui-framework/tests/fixtures/bench/src/test-bench-repeat/test-bench-repeat.html
+++ b/packages/webui-framework/tests/fixtures/bench/src/test-bench-repeat/test-bench-repeat.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <button class="run-repeat" @click="{runRepeatBench()}"></button><ul class="list"><for each="item in items"><li class="bench-item"><span class="label">{{item.label}}</span> — <span class="value">{{item.value}}</span></li></for></ul>
-</template>
+<button class="run-repeat" @click="{runRepeatBench()}"></button><ul class="list"><for each="item in items"><li class="bench-item"><span class="label">{{item.label}}</span> — <span class="value">{{item.value}}</span></li></for></ul>
diff --git a/packages/webui-framework/tests/fixtures/bench/src/test-bench/test-bench.html b/packages/webui-framework/tests/fixtures/bench/src/test-bench/test-bench.html
index 3baeeb4a..48f6aa2d 100644
--- a/packages/webui-framework/tests/fixtures/bench/src/test-bench/test-bench.html
+++ b/packages/webui-framework/tests/fixtures/bench/src/test-bench/test-bench.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <span class="t0">{{prop0}}</span><span class="t1">{{prop0}}</span><span class="t2">{{prop0}}</span><span class="t3">{{prop0}}</span><span class="t4">{{prop0}}</span><span class="t5">{{prop1}}</span><span class="t6">{{prop1}}</span><span class="t7">{{prop1}}</span><span class="t8">{{prop1}}</span><span class="t9">{{prop1}}</span><span class="t10">{{prop2}}</span><span class="t11">{{prop2}}</span><span class="t12">{{prop2}}</span><span class="t13">{{prop2}}</span><span class="t14">{{prop2}}</span><span class="t15">{{prop3}}</span><span class="t16">{{prop3}}</span><span class="t17">{{prop3}}</span><span class="t18">{{prop3}}</span><span class="t19">{{prop3}}</span><span class="t20">{{prop4}}</span><span class="t21">{{prop4}}</span><span class="t22">{{prop4}}</span><span class="t23">{{prop4}}</span><span class="t24">{{prop4}}</span><span class="t25">{{prop5}}</span><span class="t26">{{prop5}}</span><span class="t27">{{prop5}}</span><span class="t28">{{prop5}}</span><span class="t29">{{prop5}}</span><span class="t30">{{prop6}}</span><span class="t31">{{prop6}}</span><span class="t32">{{prop6}}</span><span class="t33">{{prop6}}</span><span class="t34">{{prop6}}</span><span class="t35">{{prop7}}</span><span class="t36">{{prop7}}</span><span class="t37">{{prop7}}</span><span class="t38">{{prop7}}</span><span class="t39">{{prop7}}</span><span class="t40">{{prop8}}</span><span class="t41">{{prop8}}</span><span class="t42">{{prop8}}</span><span class="t43">{{prop8}}</span><span class="t44">{{prop8}}</span><span class="t45">{{prop9}}</span><span class="t46">{{prop9}}</span><span class="t47">{{prop9}}</span><span class="t48">{{prop9}}</span><span class="t49">{{prop9}}</span><span class="a0" data-val="{{prop0}}"></span><span class="a1" data-val="{{prop1}}"></span><span class="a2" data-val="{{prop2}}"></span><span class="a3" data-val="{{prop3}}"></span><span class="a4" data-val="{{prop4}}"></span><span class="a5" data-val="{{prop5}}"></span><span class="a6" data-val="{{prop6}}"></span><span class="a7" data-val="{{prop7}}"></span><span class="a8" data-val="{{prop8}}"></span><span class="a9" data-val="{{prop9}}"></span><span class="b0" ?disabled="{{prop0}}"></span><span class="b1" ?disabled="{{prop1}}"></span><span class="b2" ?disabled="{{prop2}}"></span><span class="b3" ?disabled="{{prop3}}"></span><span class="b4" ?disabled="{{prop4}}"></span><button class="run" @click="{runBenchmark()}"></button><pre class="result"></pre>
-</template>
+<span class="t0">{{prop0}}</span><span class="t1">{{prop0}}</span><span class="t2">{{prop0}}</span><span class="t3">{{prop0}}</span><span class="t4">{{prop0}}</span><span class="t5">{{prop1}}</span><span class="t6">{{prop1}}</span><span class="t7">{{prop1}}</span><span class="t8">{{prop1}}</span><span class="t9">{{prop1}}</span><span class="t10">{{prop2}}</span><span class="t11">{{prop2}}</span><span class="t12">{{prop2}}</span><span class="t13">{{prop2}}</span><span class="t14">{{prop2}}</span><span class="t15">{{prop3}}</span><span class="t16">{{prop3}}</span><span class="t17">{{prop3}}</span><span class="t18">{{prop3}}</span><span class="t19">{{prop3}}</span><span class="t20">{{prop4}}</span><span class="t21">{{prop4}}</span><span class="t22">{{prop4}}</span><span class="t23">{{prop4}}</span><span class="t24">{{prop4}}</span><span class="t25">{{prop5}}</span><span class="t26">{{prop5}}</span><span class="t27">{{prop5}}</span><span class="t28">{{prop5}}</span><span class="t29">{{prop5}}</span><span class="t30">{{prop6}}</span><span class="t31">{{prop6}}</span><span class="t32">{{prop6}}</span><span class="t33">{{prop6}}</span><span class="t34">{{prop6}}</span><span class="t35">{{prop7}}</span><span class="t36">{{prop7}}</span><span class="t37">{{prop7}}</span><span class="t38">{{prop7}}</span><span class="t39">{{prop7}}</span><span class="t40">{{prop8}}</span><span class="t41">{{prop8}}</span><span class="t42">{{prop8}}</span><span class="t43">{{prop8}}</span><span class="t44">{{prop8}}</span><span class="t45">{{prop9}}</span><span class="t46">{{prop9}}</span><span class="t47">{{prop9}}</span><span class="t48">{{prop9}}</span><span class="t49">{{prop9}}</span><span class="a0" data-val="{{prop0}}"></span><span class="a1" data-val="{{prop1}}"></span><span class="a2" data-val="{{prop2}}"></span><span class="a3" data-val="{{prop3}}"></span><span class="a4" data-val="{{prop4}}"></span><span class="a5" data-val="{{prop5}}"></span><span class="a6" data-val="{{prop6}}"></span><span class="a7" data-val="{{prop7}}"></span><span class="a8" data-val="{{prop8}}"></span><span class="a9" data-val="{{prop9}}"></span><span class="b0" ?disabled="{{prop0}}"></span><span class="b1" ?disabled="{{prop1}}"></span><span class="b2" ?disabled="{{prop2}}"></span><span class="b3" ?disabled="{{prop3}}"></span><span class="b4" ?disabled="{{prop4}}"></span><button class="run" @click="{runBenchmark()}"></button><pre class="result"></pre>
diff --git a/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-host/test-item-host.html b/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-host/test-item-host.html
index 27945452..a6305134 100644
--- a/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-host/test-item-host.html
+++ b/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-host/test-item-host.html
@@ -1,7 +1,5 @@
-<template shadowrootmode="open">
-  <div class="controls">
-    <button class="replace" @click="{replaceItems()}">Replace</button>
-    <button class="clear" @click="{clearItems()}">Clear</button>
-  </div>
-  <test-item-list :items="{{items}}"></test-item-list>
-</template>
+<div class="controls">
+  <button class="replace" @click="{replaceItems()}">Replace</button>
+  <button class="clear" @click="{clearItems()}">Clear</button>
+</div>
+<test-item-list :items="{{items}}"></test-item-list>
diff --git a/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-list/test-item-list.html b/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-list/test-item-list.html
index 1fe3c1b1..1acd1cdb 100644
--- a/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-list/test-item-list.html
+++ b/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-list/test-item-list.html
@@ -1,7 +1,5 @@
-<template shadowrootmode="open">
-  <ul class="list">
-    <for each="item in items">
-      <li class="item">{{item.name}}</li>
-    </for>
-  </ul>
-</template>
+<ul class="list">
+  <for each="item in items">
+    <li class="item">{{item.name}}</li>
+  </for>
+</ul>
diff --git a/packages/webui-framework/tests/fixtures/conditional-component/src/test-child-comp/test-child-comp.html b/packages/webui-framework/tests/fixtures/conditional-component/src/test-child-comp/test-child-comp.html
index 76681a09..f02f9ecb 100644
--- a/packages/webui-framework/tests/fixtures/conditional-component/src/test-child-comp/test-child-comp.html
+++ b/packages/webui-framework/tests/fixtures/conditional-component/src/test-child-comp/test-child-comp.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <span class="child-text">{{label}}</span>
-</template>
+<span class="child-text">{{label}}</span>
diff --git a/packages/webui-framework/tests/fixtures/conditional-component/src/test-cond-parent/test-cond-parent.html b/packages/webui-framework/tests/fixtures/conditional-component/src/test-cond-parent/test-cond-parent.html
index dbc25f9f..a43dcbdd 100644
--- a/packages/webui-framework/tests/fixtures/conditional-component/src/test-cond-parent/test-cond-parent.html
+++ b/packages/webui-framework/tests/fixtures/conditional-component/src/test-cond-parent/test-cond-parent.html
@@ -1,6 +1,4 @@
-<template shadowrootmode="open">
-  <button class="toggle" @click="{toggleShow()}">Toggle</button>
-  <if condition="show">
-    <test-child-comp></test-child-comp>
-  </if>
-</template>
+<button class="toggle" @click="{toggleShow()}">Toggle</button>
+<if condition="show">
+  <test-child-comp></test-child-comp>
+</if>
diff --git a/packages/webui-framework/tests/fixtures/conditional-component/src/test-grandchild-comp/test-grandchild-comp.html b/packages/webui-framework/tests/fixtures/conditional-component/src/test-grandchild-comp/test-grandchild-comp.html
index 4c96175e..f447376d 100644
--- a/packages/webui-framework/tests/fixtures/conditional-component/src/test-grandchild-comp/test-grandchild-comp.html
+++ b/packages/webui-framework/tests/fixtures/conditional-component/src/test-grandchild-comp/test-grandchild-comp.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <span class="grandchild-text">{{message}}</span>
-</template>
+<span class="grandchild-text">{{message}}</span>
diff --git a/packages/webui-framework/tests/fixtures/conditional-component/src/test-mid-comp/test-mid-comp.html b/packages/webui-framework/tests/fixtures/conditional-component/src/test-mid-comp/test-mid-comp.html
index dcf6105d..807710db 100644
--- a/packages/webui-framework/tests/fixtures/conditional-component/src/test-mid-comp/test-mid-comp.html
+++ b/packages/webui-framework/tests/fixtures/conditional-component/src/test-mid-comp/test-mid-comp.html
@@ -1,6 +1,4 @@
-<template shadowrootmode="open">
-  <span class="mid-label">Mid</span>
-  <if condition="inner">
-    <test-grandchild-comp></test-grandchild-comp>
-  </if>
-</template>
+<span class="mid-label">Mid</span>
+<if condition="inner">
+  <test-grandchild-comp></test-grandchild-comp>
+</if>
diff --git a/packages/webui-framework/tests/fixtures/conditional-component/src/test-nested-cond-parent/test-nested-cond-parent.html b/packages/webui-framework/tests/fixtures/conditional-component/src/test-nested-cond-parent/test-nested-cond-parent.html
index f8d8587d..3affe766 100644
--- a/packages/webui-framework/tests/fixtures/conditional-component/src/test-nested-cond-parent/test-nested-cond-parent.html
+++ b/packages/webui-framework/tests/fixtures/conditional-component/src/test-nested-cond-parent/test-nested-cond-parent.html
@@ -1,6 +1,4 @@
-<template shadowrootmode="open">
-  <button class="toggle" @click="{toggleShow()}">Toggle</button>
-  <if condition="show">
-    <test-mid-comp></test-mid-comp>
-  </if>
-</template>
+<button class="toggle" @click="{toggleShow()}">Toggle</button>
+<if condition="show">
+  <test-mid-comp></test-mid-comp>
+</if>
diff --git a/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-client/test-conditional-client.html b/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-client/test-conditional-client.html
index a7a1d49d..551806fe 100644
--- a/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-client/test-conditional-client.html
+++ b/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-client/test-conditional-client.html
@@ -1,6 +1,4 @@
-<template shadowrootmode="open">
-  <button class="toggle" @click="{toggleOpen()}" ?disabled="{{busy}}">Toggle</button>
-  <if condition="open">
-    <span class="details">{{details}}</span>
-  </if>
-</template>
+<button class="toggle" @click="{toggleOpen()}" ?disabled="{{busy}}">Toggle</button>
+<if condition="open">
+  <span class="details">{{details}}</span>
+</if>
diff --git a/packages/webui-framework/tests/fixtures/conditional/src/test-conditional/test-conditional.html b/packages/webui-framework/tests/fixtures/conditional/src/test-conditional/test-conditional.html
index 54f7892d..d197a086 100644
--- a/packages/webui-framework/tests/fixtures/conditional/src/test-conditional/test-conditional.html
+++ b/packages/webui-framework/tests/fixtures/conditional/src/test-conditional/test-conditional.html
@@ -1,18 +1,16 @@
-<template shadowrootmode="open">
-  <button class="toggle" @click="{toggleOpen()}" ?disabled="{{busy}}">Toggle</button>
-  <if condition="open">
-    <span class="details">{{details}}</span>
-  </if>
-  <if condition="!open">
-    <span class="negated">Negated visible</span>
-  </if>
-  <if condition="open && !busy">
-    <span class="compound-and">And visible</span>
-  </if>
-  <if condition="open || busy">
-    <span class="compound-or">Or visible</span>
-  </if>
-  <if condition="count > 0">
-    <span class="gt-zero">Positive</span>
-  </if>
-</template>
+<button class="toggle" @click="{toggleOpen()}" ?disabled="{{busy}}">Toggle</button>
+<if condition="open">
+  <span class="details">{{details}}</span>
+</if>
+<if condition="!open">
+  <span class="negated">Negated visible</span>
+</if>
+<if condition="open && !busy">
+  <span class="compound-and">And visible</span>
+</if>
+<if condition="open || busy">
+  <span class="compound-or">Or visible</span>
+</if>
+<if condition="count > 0">
+  <span class="gt-zero">Positive</span>
+</if>
diff --git a/packages/webui-framework/tests/fixtures/css-link/src/test-link-child/test-link-child.html b/packages/webui-framework/tests/fixtures/css-link/src/test-link-child/test-link-child.html
index b77651ab..3e834c7c 100644
--- a/packages/webui-framework/tests/fixtures/css-link/src/test-link-child/test-link-child.html
+++ b/packages/webui-framework/tests/fixtures/css-link/src/test-link-child/test-link-child.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <link rel="stylesheet" href="child.css"><p class="child-label">Child</p>
-</template>
+<link rel="stylesheet" href="child.css"><p class="child-label">Child</p>
diff --git a/packages/webui-framework/tests/fixtures/css-link/src/test-link-host/test-link-host.html b/packages/webui-framework/tests/fixtures/css-link/src/test-link-host/test-link-host.html
index e76d0e1a..0e4d7ada 100644
--- a/packages/webui-framework/tests/fixtures/css-link/src/test-link-host/test-link-host.html
+++ b/packages/webui-framework/tests/fixtures/css-link/src/test-link-host/test-link-host.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <link rel="stylesheet" href="host.css"><button class="spawn" @click="{spawnChild()}">Spawn</button><p class="host-label">Host</p><div class="slot"></div>
-</template>
+<link rel="stylesheet" href="host.css"><button class="spawn" @click="{spawnChild()}">Spawn</button><p class="host-label">Host</p><div class="slot"></div>
diff --git a/packages/webui-framework/tests/fixtures/css-module/src/test-module-child/test-module-child.html b/packages/webui-framework/tests/fixtures/css-module/src/test-module-child/test-module-child.html
index cb59b9b6..c997becc 100644
--- a/packages/webui-framework/tests/fixtures/css-module/src/test-module-child/test-module-child.html
+++ b/packages/webui-framework/tests/fixtures/css-module/src/test-module-child/test-module-child.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <p class="child-label">Child</p>
-</template>
+<p class="child-label">Child</p>
diff --git a/packages/webui-framework/tests/fixtures/css-module/src/test-module-host/test-module-host.html b/packages/webui-framework/tests/fixtures/css-module/src/test-module-host/test-module-host.html
index 819d5a04..9a4126e5 100644
--- a/packages/webui-framework/tests/fixtures/css-module/src/test-module-host/test-module-host.html
+++ b/packages/webui-framework/tests/fixtures/css-module/src/test-module-host/test-module-host.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <button class="spawn" @click="{spawnChild()}">Spawn</button><p class="host-label">Host</p><div class="slot"></div>
-</template>
+<button class="spawn" @click="{spawnChild()}">Spawn</button><p class="host-label">Host</p><div class="slot"></div>
diff --git a/packages/webui-framework/tests/fixtures/css-style/src/test-style-child/test-style-child.html b/packages/webui-framework/tests/fixtures/css-style/src/test-style-child/test-style-child.html
index 8af7fe71..ec880300 100644
--- a/packages/webui-framework/tests/fixtures/css-style/src/test-style-child/test-style-child.html
+++ b/packages/webui-framework/tests/fixtures/css-style/src/test-style-child/test-style-child.html
@@ -1,4 +1,2 @@
-<template shadowrootmode="open">
-  <style>.child-label{color:rgb(210, 105, 30);}</style>
-  <p class="child-label">Child</p>
-</template>
+<style>.child-label{color:rgb(210, 105, 30);}</style>
+<p class="child-label">Child</p>
diff --git a/packages/webui-framework/tests/fixtures/css-style/src/test-style-host/test-style-host.html b/packages/webui-framework/tests/fixtures/css-style/src/test-style-host/test-style-host.html
index 132ab63a..ca16ca01 100644
--- a/packages/webui-framework/tests/fixtures/css-style/src/test-style-host/test-style-host.html
+++ b/packages/webui-framework/tests/fixtures/css-style/src/test-style-host/test-style-host.html
@@ -1,6 +1,4 @@
-<template shadowrootmode="open">
-  <style>.host-label{color:rgb(12, 34, 56);}</style>
-  <button class="spawn" @click="{spawnChild()}">Spawn</button>
-  <p class="host-label">Host</p>
-  <div class="slot"></div>
-</template>
+<style>.host-label{color:rgb(12, 34, 56);}</style>
+<button class="spawn" @click="{spawnChild()}">Spawn</button>
+<p class="host-label">Host</p>
+<div class="slot"></div>
diff --git a/packages/webui-framework/tests/fixtures/list/src/test-list-item/test-list-item.html b/packages/webui-framework/tests/fixtures/list/src/test-list-item/test-list-item.html
index bb2134bf..f5ab554c 100644
--- a/packages/webui-framework/tests/fixtures/list/src/test-list-item/test-list-item.html
+++ b/packages/webui-framework/tests/fixtures/list/src/test-list-item/test-list-item.html
@@ -1,9 +1,7 @@
-<template shadowrootmode="open">
-  <article class="item">
-    <button class="toggle" @click="{onToggle()}">Toggle</button>
-    <span class="title">{{title}}</span>
-    <if condition="state == 'done'">
-      <span class="done">Done</span>
-    </if>
-  </article>
-</template>
+<article class="item">
+  <button class="toggle" @click="{onToggle()}">Toggle</button>
+  <span class="title">{{title}}</span>
+  <if condition="state == 'done'">
+    <span class="done">Done</span>
+  </if>
+</article>
diff --git a/packages/webui-framework/tests/fixtures/multi-repeat/src/test-multi-repeat/test-multi-repeat.html b/packages/webui-framework/tests/fixtures/multi-repeat/src/test-multi-repeat/test-multi-repeat.html
index 78a6448d..8a40a267 100644
--- a/packages/webui-framework/tests/fixtures/multi-repeat/src/test-multi-repeat/test-multi-repeat.html
+++ b/packages/webui-framework/tests/fixtures/multi-repeat/src/test-multi-repeat/test-multi-repeat.html
@@ -1,26 +1,24 @@
-<template shadowrootmode="open">
-  <ul class="list-a">
-    <for each="item in items">
-      <li>
-        <if condition="item.active == 'true'">
-          <p class="current">{{item.title}}</p>
-        </if>
-        <if condition="item.active != 'true'">
-          <a class="link" href="{{item.href}}">{{item.title}}</a>
-        </if>
-      </li>
-    </for>
-  </ul>
-  <ul class="list-b">
-    <for each="item in items">
-      <li>
-        <if condition="item.active == 'true'">
-          <p class="current">{{item.title}}</p>
-        </if>
-        <if condition="item.active != 'true'">
-          <a class="link" href="{{item.href}}">{{item.title}}</a>
-        </if>
-      </li>
-    </for>
-  </ul>
-</template>
+<ul class="list-a">
+  <for each="item in items">
+    <li>
+      <if condition="item.active == 'true'">
+        <p class="current">{{item.title}}</p>
+      </if>
+      <if condition="item.active != 'true'">
+        <a class="link" href="{{item.href}}">{{item.title}}</a>
+      </if>
+    </li>
+  </for>
+</ul>
+<ul class="list-b">
+  <for each="item in items">
+    <li>
+      <if condition="item.active == 'true'">
+        <p class="current">{{item.title}}</p>
+      </if>
+      <if condition="item.active != 'true'">
+        <a class="link" href="{{item.href}}">{{item.title}}</a>
+      </if>
+    </li>
+  </for>
+</ul>
diff --git a/packages/webui-framework/tests/fixtures/nested-event/src/test-nested-child/test-nested-child.html b/packages/webui-framework/tests/fixtures/nested-event/src/test-nested-child/test-nested-child.html
index f1163f8b..29da437a 100644
--- a/packages/webui-framework/tests/fixtures/nested-event/src/test-nested-child/test-nested-child.html
+++ b/packages/webui-framework/tests/fixtures/nested-event/src/test-nested-child/test-nested-child.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <button class="child-btn" @click="{onChildClick()}">Child</button>
-</template>
+<button class="child-btn" @click="{onChildClick()}">Child</button>
diff --git a/packages/webui-framework/tests/fixtures/nested-event/src/test-nested-event/test-nested-event.html b/packages/webui-framework/tests/fixtures/nested-event/src/test-nested-event/test-nested-event.html
index 76b51eef..394a8519 100644
--- a/packages/webui-framework/tests/fixtures/nested-event/src/test-nested-event/test-nested-event.html
+++ b/packages/webui-framework/tests/fixtures/nested-event/src/test-nested-event/test-nested-event.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <span class="count">{{parentClicks}}</span><button class="parent-btn" @click="{onParentClick()}">Parent</button><test-nested-child></test-nested-child>
-</template>
+<span class="count">{{parentClicks}}</span><button class="parent-btn" @click="{onParentClick()}">Parent</button><test-nested-child></test-nested-child>
diff --git a/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat/test-nested-repeat.html b/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat/test-nested-repeat.html
index 9b852d51..969a1454 100644
--- a/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat/test-nested-repeat.html
+++ b/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat/test-nested-repeat.html
@@ -1,17 +1,15 @@
-<template shadowrootmode="open">
-  <div class="controls">
-    <button class="load" @click="{loadGroups()}">Load</button>
-  </div>
-  <div class="groups">
-    <for each="group in groups">
-      <section class="group">
-        <h2>{{group.name}}</h2>
-        <div class="values">
-          <for each="item in group.values">
-            <button class="value" data-group="{{group.name}}" data-value="{{item.value}}" ?disabled="{{item.disabled}}">{{item.value}}</button>
-          </for>
-        </div>
-      </section>
-    </for>
-  </div>
-</template>
+<div class="controls">
+  <button class="load" @click="{loadGroups()}">Load</button>
+</div>
+<div class="groups">
+  <for each="group in groups">
+    <section class="group">
+      <h2>{{group.name}}</h2>
+      <div class="values">
+        <for each="item in group.values">
+          <button class="value" data-group="{{group.name}}" data-value="{{item.value}}" ?disabled="{{item.disabled}}">{{item.value}}</button>
+        </for>
+      </div>
+    </section>
+  </for>
+</div>
diff --git a/packages/webui-framework/tests/fixtures/optional-css-link/src/test-no-css-child/test-no-css-child.html b/packages/webui-framework/tests/fixtures/optional-css-link/src/test-no-css-child/test-no-css-child.html
index 0ba6de69..88581b62 100644
--- a/packages/webui-framework/tests/fixtures/optional-css-link/src/test-no-css-child/test-no-css-child.html
+++ b/packages/webui-framework/tests/fixtures/optional-css-link/src/test-no-css-child/test-no-css-child.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <p class="child-label">Ready</p>
-</template>
+<p class="child-label">Ready</p>
diff --git a/packages/webui-framework/tests/fixtures/optional-css-link/src/test-no-css-host/test-no-css-host.html b/packages/webui-framework/tests/fixtures/optional-css-link/src/test-no-css-host/test-no-css-host.html
index aa77dabd..c41fbc3b 100644
--- a/packages/webui-framework/tests/fixtures/optional-css-link/src/test-no-css-host/test-no-css-host.html
+++ b/packages/webui-framework/tests/fixtures/optional-css-link/src/test-no-css-host/test-no-css-host.html
@@ -1,4 +1,2 @@
-<template shadowrootmode="open">
-  <button class="spawn" @click="{spawnChild()}">Spawn</button>
-  <div class="slot"></div>
-</template>
+<button class="spawn" @click="{spawnChild()}">Spawn</button>
+<div class="slot"></div>
diff --git a/packages/webui-framework/tests/fixtures/ref/src/test-ref/test-ref.html b/packages/webui-framework/tests/fixtures/ref/src/test-ref/test-ref.html
index 26602f15..e5d7092e 100644
--- a/packages/webui-framework/tests/fixtures/ref/src/test-ref/test-ref.html
+++ b/packages/webui-framework/tests/fixtures/ref/src/test-ref/test-ref.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <input class="input" w-ref="{inputEl}"><span class="display">{{value}}</span><button class="read" @click="{readInput()}">Read</button><button class="focus" @click="{focusInput()}">Focus</button>
-</template>
+<input class="input" w-ref="{inputEl}"><span class="display">{{value}}</span><button class="read" @click="{readInput()}">Read</button><button class="focus" @click="{focusInput()}">Focus</button>
diff --git a/packages/webui-framework/tests/fixtures/repeat-append/src/test-repeat-child/test-repeat-child.html b/packages/webui-framework/tests/fixtures/repeat-append/src/test-repeat-child/test-repeat-child.html
index ee50fdfb..c8bb8f94 100644
--- a/packages/webui-framework/tests/fixtures/repeat-append/src/test-repeat-child/test-repeat-child.html
+++ b/packages/webui-framework/tests/fixtures/repeat-append/src/test-repeat-child/test-repeat-child.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <span class="label">{{label}}</span>
-</template>
+<span class="label">{{label}}</span>
diff --git a/packages/webui-framework/tests/fixtures/repeat-append/src/test-repeat-parent/test-repeat-parent.html b/packages/webui-framework/tests/fixtures/repeat-append/src/test-repeat-parent/test-repeat-parent.html
index 7fa29b19..286949c4 100644
--- a/packages/webui-framework/tests/fixtures/repeat-append/src/test-repeat-parent/test-repeat-parent.html
+++ b/packages/webui-framework/tests/fixtures/repeat-append/src/test-repeat-parent/test-repeat-parent.html
@@ -1,10 +1,8 @@
-<template shadowrootmode="open">
-  <button class="add" @click="{addItem()}">Add</button>
-  <button class="prepend" @click="{prependItem()}">Prepend</button>
-  <button class="remove" @click="{removeItem()}">Remove</button>
-  <div class="list">
-    <for each="item in items">
-      <test-repeat-child label="{{item.title}}"></test-repeat-child>
-    </for>
-  </div>
-</template>
+<button class="add" @click="{addItem()}">Add</button>
+<button class="prepend" @click="{prependItem()}">Prepend</button>
+<button class="remove" @click="{removeItem()}">Remove</button>
+<div class="list">
+  <for each="item in items">
+    <test-repeat-child label="{{item.title}}"></test-repeat-child>
+  </for>
+</div>
diff --git a/packages/webui-framework/tests/fixtures/repeat-conditional/src/test-repeat-conditional/test-repeat-conditional.html b/packages/webui-framework/tests/fixtures/repeat-conditional/src/test-repeat-conditional/test-repeat-conditional.html
index 9a2449f7..46e4559b 100644
--- a/packages/webui-framework/tests/fixtures/repeat-conditional/src/test-repeat-conditional/test-repeat-conditional.html
+++ b/packages/webui-framework/tests/fixtures/repeat-conditional/src/test-repeat-conditional/test-repeat-conditional.html
@@ -1,18 +1,16 @@
-<template shadowrootmode="open">
-  <div class="controls">
-    <button class="load" @click="{loadItems()}">Load</button>
-    <button class="switch" @click="{switchItems()}">Switch</button>
-  </div>
-  <ul class="items">
-    <for each="item in items">
-      <li>
-        <if condition="item.activeClass == 'active'">
-          <p class="current" data-href="{{item.href}}">{{item.title}}</p>
-        </if>
-        <if condition="item.activeClass != 'active'">
-          <button class="link" data-href="{{item.href}}" ?disabled="{{item.disabled}}">{{item.title}}</button>
-        </if>
-      </li>
-    </for>
-  </ul>
-</template>
+<div class="controls">
+  <button class="load" @click="{loadItems()}">Load</button>
+  <button class="switch" @click="{switchItems()}">Switch</button>
+</div>
+<ul class="items">
+  <for each="item in items">
+    <li>
+      <if condition="item.activeClass == 'active'">
+        <p class="current" data-href="{{item.href}}">{{item.title}}</p>
+      </if>
+      <if condition="item.activeClass != 'active'">
+        <button class="link" data-href="{{item.href}}" ?disabled="{{item.disabled}}">{{item.title}}</button>
+      </if>
+    </li>
+  </for>
+</ul>
diff --git a/packages/webui-framework/tests/fixtures/sidebar-repeat/src/test-sidebar-repeat/test-sidebar-repeat.html b/packages/webui-framework/tests/fixtures/sidebar-repeat/src/test-sidebar-repeat/test-sidebar-repeat.html
index d752a9da..3e891ad2 100644
--- a/packages/webui-framework/tests/fixtures/sidebar-repeat/src/test-sidebar-repeat/test-sidebar-repeat.html
+++ b/packages/webui-framework/tests/fixtures/sidebar-repeat/src/test-sidebar-repeat/test-sidebar-repeat.html
@@ -1,17 +1,15 @@
-<template shadowrootmode="open">
-  <link rel="stylesheet" href="/sidebar-repeat/sidebar-repeat.css" />
-  <nav class="sidebar">
-    <div class="nav-section">
-      <a class="nav-item" ?data-active="{{page == 'dashboard'}}" data-nav="Dashboard" href="/">Dashboard</a>
-      <a class="nav-item" ?data-active="{{page == 'contacts'}}" data-nav="All Contacts" href="/contacts">All Contacts</a>
-      <a class="nav-item" ?data-active="{{page == 'favorites'}}" data-nav="Favorites" href="/favorites">Favorites</a>
-    </div>
-    <div class="nav-divider"></div>
-    <div class="nav-section">
-      <h3 class="nav-heading">Groups</h3>
-      <for each="group in groups">
-        <a class="nav-item nav-item-group" ?data-active="{{page == 'group' && activeGroup == group}}" data-nav="{{group}}" href="/groups/{{group}}">{{group}}</a>
-      </for>
-    </div>
-  </nav>
-</template>
+<link rel="stylesheet" href="/sidebar-repeat/sidebar-repeat.css" />
+<nav class="sidebar">
+  <div class="nav-section">
+    <a class="nav-item" ?data-active="{{page == 'dashboard'}}" data-nav="Dashboard" href="/">Dashboard</a>
+    <a class="nav-item" ?data-active="{{page == 'contacts'}}" data-nav="All Contacts" href="/contacts">All Contacts</a>
+    <a class="nav-item" ?data-active="{{page == 'favorites'}}" data-nav="Favorites" href="/favorites">Favorites</a>
+  </div>
+  <div class="nav-divider"></div>
+  <div class="nav-section">
+    <h3 class="nav-heading">Groups</h3>
+    <for each="group in groups">
+      <a class="nav-item nav-item-group" ?data-active="{{page == 'group' && activeGroup == group}}" data-nav="{{group}}" href="/groups/{{group}}">{{group}}</a>
+    </for>
+  </div>
+</nav>
diff --git a/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-btn/test-slot-btn.html b/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-btn/test-slot-btn.html
index b95b31be..519174aa 100644
--- a/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-btn/test-slot-btn.html
+++ b/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-btn/test-slot-btn.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <button class="btn"><slot></slot></button>
-</template>
+<button class="btn"><slot></slot></button>
diff --git a/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-parent/test-slot-parent.html b/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-parent/test-slot-parent.html
index fb30b7c4..584204ed 100644
--- a/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-parent/test-slot-parent.html
+++ b/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-parent/test-slot-parent.html
@@ -1,3 +1 @@
-<template shadowrootmode="open">
-  <div class="container"></div>
-</template>
+<div class="container"></div>
diff --git a/packages/webui-framework/tests/fixtures/split-repeat/src/test-split-repeat/test-split-repeat.html b/packages/webui-framework/tests/fixtures/split-repeat/src/test-split-repeat/test-split-repeat.html
index 79a05833..ee08d6e6 100644
--- a/packages/webui-framework/tests/fixtures/split-repeat/src/test-split-repeat/test-split-repeat.html
+++ b/packages/webui-framework/tests/fixtures/split-repeat/src/test-split-repeat/test-split-repeat.html
@@ -1,15 +1,13 @@
-<template shadowrootmode="open">
-  <div class="controls">
-    <button class="load" @click="{loadItems()}">Load</button>
-  </div>
-  <ul class="primary">
-    <for each="item in primaryItems">
-      <li class="primary-item">{{item.label}}</li>
-    </for>
-  </ul>
-  <ul class="secondary">
-    <for each="item in secondaryItems">
-      <li class="secondary-item">{{item.label}}</li>
-    </for>
-  </ul>
-</template>
+<div class="controls">
+  <button class="load" @click="{loadItems()}">Load</button>
+</div>
+<ul class="primary">
+  <for each="item in primaryItems">
+    <li class="primary-item">{{item.label}}</li>
+  </for>
+</ul>
+<ul class="secondary">
+  <for each="item in secondaryItems">
+    <li class="secondary-item">{{item.label}}</li>
+  </for>
+</ul>
diff --git a/packages/webui-framework/tests/fixtures/state-seed/src/test-state-seed-shell/test-state-seed-shell.html b/packages/webui-framework/tests/fixtures/state-seed/src/test-state-seed-shell/test-state-seed-shell.html
index 9b065b23..578a1cf5 100644
--- a/packages/webui-framework/tests/fixtures/state-seed/src/test-state-seed-shell/test-state-seed-shell.html
+++ b/packages/webui-framework/tests/fixtures/state-seed/src/test-state-seed-shell/test-state-seed-shell.html
@@ -1,13 +1,11 @@
-<template shadowrootmode="open">
-  <div class="page">{{page}}</div>
-  <nav class="groups">
-    <for each="group in groups">
-      <a class="group-link" data-nav="{{group}}" href="/groups/{{group}}">{{group}}</a>
-    </for>
-  </nav>
-  <nav class="categories">
-    <for each="cat in navCategories">
-      <a class="category-link {{cat.activeClass}}" href="/search/{{cat.handle}}">{{cat.title}}</a>
-    </for>
-  </nav>
-</template>
+<div class="page">{{page}}</div>
+<nav class="groups">
+  <for each="group in groups">
+    <a class="group-link" data-nav="{{group}}" href="/groups/{{group}}">{{group}}</a>
+  </for>
+</nav>
+<nav class="categories">
+  <for each="cat in navCategories">
+    <a class="category-link {{cat.activeClass}}" href="/search/{{cat.handle}}">{{cat.title}}</a>
+  </for>
+</nav>
diff --git a/packages/webui-framework/tests/fixtures/state-seed/src/test-state-seed/test-state-seed.html b/packages/webui-framework/tests/fixtures/state-seed/src/test-state-seed/test-state-seed.html
index 7169ae08..b535156f 100644
--- a/packages/webui-framework/tests/fixtures/state-seed/src/test-state-seed/test-state-seed.html
+++ b/packages/webui-framework/tests/fixtures/state-seed/src/test-state-seed/test-state-seed.html
@@ -1,6 +1,4 @@
-<template shadowrootmode="open">
-  <h1 class="title">{{title}}</h1>
-  <test-state-seed-shell page="{{page}}" :groups="{{groups}}" :navCategories="{{navCategories}}"></test-state-seed-shell>
-  <button class="add-group" @click="{addGroup()}">Add Group</button>
-  <button class="add-category" @click="{addCategory()}">Add Category</button>
-</template>
+<h1 class="title">{{title}}</h1>
+<test-state-seed-shell page="{{page}}" :groups="{{groups}}" :navCategories="{{navCategories}}"></test-state-seed-shell>
+<button class="add-group" @click="{addGroup()}">Add Group</button>
+<button class="add-category" @click="{addCategory()}">Add Category</button>
diff --git a/packages/webui-framework/tests/fixtures/text-only-repeat/src/test-text-only-repeat/test-text-only-repeat.html b/packages/webui-framework/tests/fixtures/text-only-repeat/src/test-text-only-repeat/test-text-only-repeat.html
index 013eb5e0..5d6f86b3 100644
--- a/packages/webui-framework/tests/fixtures/text-only-repeat/src/test-text-only-repeat/test-text-only-repeat.html
+++ b/packages/webui-framework/tests/fixtures/text-only-repeat/src/test-text-only-repeat/test-text-only-repeat.html
@@ -1,10 +1,8 @@
-<template shadowrootmode="open">
-  <span class="label">
-    <for each="option in options">
-      <if condition="option.active">
-        <span class="active-label">{{option.title}}</span>
-      </if>
-    </for>
-  </span>
-  <button class="update" @click="{onUpdate()}">Update</button>
-</template>
+<span class="label">
+  <for each="option in options">
+    <if condition="option.active">
+      <span class="active-label">{{option.title}}</span>
+    </if>
+  </for>
+</span>
+<button class="update" @click="{onUpdate()}">Update</button>
diff --git a/packages/webui-router/README.md b/packages/webui-router/README.md
index 4f62b7d5..63b16496 100644
--- a/packages/webui-router/README.md
+++ b/packages/webui-router/README.md
@@ -40,14 +40,12 @@ Child routes use **relative paths** (no leading `/`). The nesting is the route t
 
 ```html
 <!-- app-shell.html -->
-<template shadowrootmode="open">
-  <nav>
-    <a href="/">Home</a>
-    <a href="/users">Users</a>
-  </nav>
-  <main><outlet /></main>
-  <footer>© 2026</footer>
-</template>
+<nav>
+  <a href="/">Home</a>
+  <a href="/users">Users</a>
+</nav>
+<main><outlet /></main>
+<footer>© 2026</footer>
 ```
 
 `<outlet />` marks where child route content renders. The nav and footer persist across navigations.