[huang-julien]

Closes #

What I did

Documentation update for Storybook web components with Docgen server.

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

---

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary Release - 🚫 Not run

This PR does not have a canary release associated.

In-repo PRs: add the ci:canary label. Later pushes republish while the label remains.

Fork PRs: the label does nothing (a later push must not auto-publish). A maintainer publishes from this repository with Run workflow and the pr input. branch and sha are optional; if more than one is set, they must be the same commit. The fork author does not need to do anything.

[kylegach]

@huang-julien, I pushed updates to make the prose much closer to plain language. As I was doing so, Claude found these questions that need resolved, and I think you're best positioned to address them:

1. The text and snippets disagree. The text says "import the module that defines it," but none of the three story snippets import anything. Either add an import to each one (for example import './lit-slots-and-css';) or explain where the import goes. As written, a reader who copies a snippet gets no controls.
2. The old text was wrong about package.json. It said "Storybook also picks up the customElements field," which sounds like both sources are used. In resolve-manifest-paths.ts, the package.json field is read only when customElementsManifest is not set. I made the text say that. Confirm this is the intended behavior and not a bug.
3. The -method suffix isn't documented. arg-keys.ts defines a -method suffix, but the table leaves it out. Either it's deliberately left out, or the table needs a row for it.
4. The deprecation isn't mentioned. framework-api.ts deprecates the runtime setCustomElementsManifest API, to be removed in Storybook 12. Users moving from it need to know that the new option replaces it. That could be a note on this page or in the migration guide.
5. "Without extra configuration" may be too strong. It depends on isDocgenProviderEnabled = true in the renderer preset. The page doesn't say what happens if a user has set features.docgenServer: false.
6. The example names are confusing. The story is named Template but uses a render function, and the heading values 'Projected' and 'Default render' read like internal test fixtures. Names that describe what the reader sees would be clearer.
7. The framework-options snippet changed. web-components-vite-framework-options.md changed from // ... to a real customElementsManifest value. It now duplicates the new manifest snippet. One of the two may be redundant.

[huang-julien]

1 - Import added
2- Ppackkages.json#customElements is the fallback when the option is not used. And then the auto docgen behavior is the fallback when both are not used.
3 - done
4- oh I forgot about that, here's the PR : #36904
5 - 👍
6- Renamed 👍
7- Dropped the new manifest snippet. The section reuses the framework-options one.

[kylegach]

Great work!