Skip to content

chore: remove unnecessary <template shadowrootmode="open"> wrappers#234

Merged
mohamedmansour merged 1 commit intomainfrom
mmansour/remove-unnecessary-template-wrappers
Apr 14, 2026
Merged

chore: remove unnecessary <template shadowrootmode="open"> wrappers#234
mohamedmansour merged 1 commit intomainfrom
mmansour/remove-unnecessary-template-wrappers

Conversation

@mohamedmansour
Copy link
Copy Markdown
Contributor

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.:

<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.

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>
@mohamedmansour mohamedmansour merged commit e564d02 into main Apr 14, 2026
21 checks passed
@mohamedmansour mohamedmansour deleted the mmansour/remove-unnecessary-template-wrappers branch April 14, 2026 05:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants