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 PR re-exports the html function through @storybook/web-components to standardize custom render functions for web components.

• Updated /code/renderers/web-components/src/index.ts to re-export html from lit-html.
• Modified /code/renderers/web-components/template/stories/demo-wc-card.stories.js and script.stories.js to import html from @storybook/web-components.
• Adjusted /code/renderers/web-components/package.json by switching dependency from lit to lit-html.
• Note: Verify sample components update for consistent usage of the new html export.

[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 --parallel=3	✅ Succeeded	1m 50s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-03-31 08:01:51 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.