chore: remove unnecessary <template shadowrootmode="open"> wrappers#234
Merged
mohamedmansour merged 1 commit intomainfrom Apr 14, 2026
Merged
Conversation
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>
toddreifsteck
approved these changes
Apr 14, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.: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 templatesexamples/app/routes/— 1 component templatepackages/webui-framework/tests/fixtures/— 37 test fixture templatesFiles 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 exampledocs/tutorials/todo-app.md— todo-item templatedocs/guide/concepts/routing.md— 4 shell/page examplesdocs/guide/concepts/hydration.md— 2 source template examplesdocs/guide/concepts/directives/route.md— 2 outlet examplesdocs/guide/ai.md— outlet examplepackages/webui-router/README.md— shell examplepackages/webui-framework/tests/fixtures/README.md— template guide.github/skills/testing/SKILL.md— fixture scaffold exampleSSR output examples (showing what the build produces) and conceptual references explaining the
shadowrootmodeattribute are preserved.