New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
Three different apps in our company each reimplemented the same button and modal, and now all three look and act slightly differently.
What you'll have at the end
One versioned, publishable package for the shared button-or-modal element: a manifest with one strict entry point, a duplicate-safe registration, a build that survives a consumer's tree-shaking, and a declaration file a consumer's own compiler resolves, confirmed this run to behave correctly from a real packed tarball, from a bare page with no bundler at all, and when two of the company's own separately-built apps each load their own copy on the same page.
You need
A custom element class for a shared UI piece, already registered and working inside one app: a shadow root, at least one attribute, and one custom event it dispatches, manually tested there and ready for other apps to reuse instead of copy-pasting the file.
Not covered
Auto-generating a typed wrapper component for every consuming framework, and namespacing multiple versions of the tag so two different versions can coexist on one page: both are real needs once a package has many consumers, but this recipe stops at one clean, installable version of one element.
Leans on
Checked 25 Aug 2026
Part of the Web Components cookbook