Web-components: Export html helper for custom render functions

[shilman]

Closes #30979

What I did

• Re-export html
• Update docs
• Update sample components

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

Create a WC sandbox and run it. Add a story with a custom render function.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

This review covers only the changes made since the last review (commit ba1b8f5), not the entire PR.

The recent changes address the previous typo feedback and include several additional documentation updates across web-components examples. The main changes include:

• Fixed documentation typo: The duplicate "stories" in the JSDoc comment in index.ts has been corrected to "stories that compose multiple web components"
• Comprehensive documentation updates: Updated import statements across ~25 documentation snippet files to use import { html } from '@storybook/web-components' instead of import { html } from 'lit'
• Migration documentation: Added a new section to MIGRATION.md documenting the breaking change for Storybook 9.0
• Dependency management: Removed lit dependency from web-components-webpack5 package to avoid conflicts
• Type imports consistency: Updated type imports in several files to use lit-html consistently

These changes complete the standardization effort by ensuring all documentation examples demonstrate the new import pattern where users import the html helper from @storybook/web-components rather than directly from lit. This provides a more consistent API surface and better encapsulation for the web-components renderer.

Confidence score: 4/5

• This update is mostly safe with comprehensive documentation fixes and good migration guidance
• Score reflects the thoroughness of documentation updates but notes one critical missing import in a TypeScript example
• Pay close attention to docs/_snippets/list-story-starter.md which has a TypeScript example using html without importing it

[greptile-apps]

_{4 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 9e878da

Command	Status	Duration	Result
nx run-many -t build -c production --parallel=3	✅ Succeeded	4m 30s	View ↗
nx affected -t check -c production --parallel=7	✅ Succeeded	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-08-12 06:58:03 UTC

[shilman]

The sample components still use lit's html helper:

https://github.com/storybookjs/storybook/blob/next/code/renderers/web-components/template/cli/js/Button.js#L1

This is "user" code instead of story code, so I didn't update it to use Storybook's html export. We probably should update the Button/Header/Page sample components to not use Lit at all, so that we don't need to update the user's package.json.

[greptile-apps]

_{34 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}