Choosing Your StencilJS Output Target: Lazy-Loading vs. Bundled Custom Elements
Deciding between StencilJS's lazy-loaded 'dist' target and the 'dist-custom-elements' bundle is a trade-off between initial load speed and integration simplicity.
ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Deciding between StencilJS's lazy-loaded 'dist' target and the 'dist-custom-elements' bundle is a trade-off between initial load speed and integration simplicity.
An architecture note that outlines the requirements for lazy‑loading StencilJS components, the minimal design needed, trust/data boundaries, operational verification steps, failure modes, and conditions that would trigger a redesign.
Learn how StencilJS’s @Lazy decorator splits a component into its own bundle, loads it on demand, and what trade‑offs to consider before applying it.
Learn how HTML5 Custom Elements let you create reusable, framework-free UI tags that encapsulate markup, style, and behavior, with a worked counter example and notes on style scoping and browser support.
Decide whether to use eager, lazy, or hybrid loading for StencilJS components. Compare constraints, trade‑offs, and see a concrete example that validates on‑demand loading while keeping SSR and legacy browsers happy.
When a StencilJS app’s lazy‑loaded components fail in production, the root causes often lie in build config, base href, or server rewrite rules. This diagnostic guide walks through symptoms, checks, fixes, and escalation steps to help you pinpoint and resolve the issue quickly.
Learn how to enable component‑level lazy loading in StencilJS, verify the generated chunks, and understand when the trade‑off makes sense.
Learn when to use @Prop vs @State in StencilJS to avoid unidirectional data flow violations and unnecessary re-renders in your web components.
Author once in Stencil and emit Custom Elements plus React, Angular and Vue wrappers from one stencil.config.ts. Learn how to configure outputTargets, verify artifacts, and manage Shadow DOM and SSR trade-offs.