Lazy‑Loading StencilJS Components: When and How to Split Your Bundle
Learn how to enable component‑level lazy loading in StencilJS, verify the generated chunks, and understand when the trade‑off makes sense.
ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Learn how to enable component‑level lazy loading in StencilJS, verify the generated chunks, and understand when the trade‑off makes sense.
Learn how to split StencilJS components into lazy chunks, keep server‑rendered HTML interactive with hydration, and verify the design with build checks and browser devtools.
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.
A Stencil component library supporting both scoped and shadow encapsulation exposes styling hooks that behave differently with no compile-time warning. In scoped mode, the compiler injects a generated class onto the host and rewrites template selectors, but ::part() is a native shadow-DOM pseudo-element and is not rewritten, so those rules are dropped. ::slo
Slot Projection Timing Limits \n StencilJS’s newSpecPage renders a component in a simulated DOM and supports slot content projection. The API requires calling page.waitForChanges() after setting slot HTML to allow the framework to distribute child nodes. However, the documentation does not state whether a single waitForChanges is always sufficient when the p
Assess the impact of making shadow: true the default encapsulation mode for new Stencil components in a future major release. Consider the trade‑off between stronger DOM/style isolation and the potential breakage for consumers who currently rely on querySelector access or global style overrides under the scoped emulation. What version bump would signal this
Context The dist-custom-elements output target emits a single bundle per component and registers each custom element under a flat name in window.customElements . When a component's public API—props, events, or slots—changes in a breaking way, the new definition overwrites the previous one without any version identifier in the registry or the generated file n
I am building a StencilJS component and need certain reactive properties to remain internal implementation details. The @Prop decorator exposes properties through the custom element's attribute and property interface, so I want to confirm whether TypeScript's private modifier prevents them from becoming part of the public API at runtime. StencilJS has no ded