This is a requirement of the Custom Elements specification (part of the Web Components standard). The hyphen prevents naming conflicts with existing and future standard HTML elements. All custom element names must contain at least one hyphen — for example, my-button, user-avatar, or data-table. Single-word names like mycomponent are invalid and will throw a DOMException.

@Prop: Public properties that can be passed from parent components or set via HTML attributes. They are immutable by default but can be made mutable with { mutable: true }.
@State: Internal reactive state that triggers re-renders when changed. Not exposed to parent components — use this for local UI state.
@Event: Declares custom DOM events that the component can emit using an EventEmitter. Parent components listen to these events using standard addEventListener or framework-specific event binding.

Shadow DOM encapsulates your component's styles and DOM structure, preventing CSS leaks and DOM conflicts with the parent page. Enable it when you want full isolation — ideal for design system components. Disable it when you need your component's styles to inherit from the parent (e.g., typography, CSS variables) or when you need the parent to easily traverse your component's DOM. Stencil lets you choose per component with the shadow option in @Component.

Stencil takes a compiler-first approach, meaning it analyzes your code at build time and generates highly optimized Web Components. Unlike Lit (which is a runtime library), Stencil moves work to compile time for smaller bundles and better performance. It also provides first-class TypeScript support, JSX syntax familiar to React developers, and built-in features like lazy loading, prerendering, and framework integration. Svelte compiles to vanilla JS but doesn't target Web Components natively. Vanilla Web Components require significantly more boilerplate.

Absolutely! Stencil components compile to standard Custom Elements (Web Components), which are natively supported by all modern browsers. They work seamlessly in React, Vue, Angular, Svelte, or any HTML page. Stencil even provides framework-specific output targets that generate wrapper components for React, Vue, and Angular, giving you full framework integration with proper prop typing, event handling, and reactivity.

Stencil provides a rich set of lifecycle hooks:
connectedCallback() — called when component is added to the DOM
disconnectedCallback() — called when removed from the DOM
componentWillLoad() — before the first render
componentDidLoad() — after the first render
componentWillRender() — before each render
componentDidRender() — after each render
componentWillUpdate() — before reactive data changes trigger a re-render
componentDidUpdate() — after a re-render completes
These give you fine-grained control over your component's behavior throughout its lifecycle.

Yes, if you're using JSX in your Stencil component, you need to import h from @stencil/core. The h function is Stencil's hyperscript function that converts JSX into virtual DOM nodes. Without this import, your JSX will not compile correctly. Our generator automatically includes the necessary h import in the generated code.