# Documentation

## Page index

- WebComponent: / - Build reactive Web Components enhanced with state, props, scoped styles, lifecycles, and form integration — powered by Markup.
- What is WebComponent?: /documentation/ - WebComponent is a reactive layer on top of native Web Components API, powered by Markup. It adds state, props, scoped styles, and lifecycles.
- Get Started: /documentation/get-started - Learn how to build your first reactive Web Component using the WebComponent class.
- Installation: /documentation/installation - Install WebComponent via npm, yarn, pnpm or include it via CDN.
- Guide & Best Practices: /documentation/guide - Practical conventions for building reactive custom elements with @beforesemicolon/web-component.
- AI Guide: /documentation/ai - AI-first guide to @beforesemicolon/web-component APIs, source boundaries, and common implementation mistakes.
- Creating Components: /documentation/fundamentals/creating-components - Learn how to subclass WebComponent and register your custom elements.
- Rendering: /documentation/fundamentals/rendering - Learn about the render() method and how content slots work.
- Config: /documentation/fundamentals/config - Configure Shadow DOM shadow root options on your components.
- TypeScript: /documentation/fundamentals/typescript - Complete type safety and generics integration in WebComponent.
- Props: /documentation/props-and-state/props - Define and read reactive external properties mapped to observed attributes.
- State: /documentation/props-and-state/state - Manage reactive local component state using initialState and setState.
- Refs: /documentation/props-and-state/refs - Safely reference and interact with rendered DOM elements inside your templates.
- Stylesheet: /documentation/styling/stylesheet - Learn how to load, assign, and manage component styles using the stylesheet property.
- css Utility: /documentation/styling/css-utility - Use the css tagged template literal to build highly reactive and dynamic component styles.
- updateStylesheet: /documentation/styling/update-stylesheet - Swap stylesheets dynamically at runtime using updateStylesheet.
- Events: /documentation/events-and-lifecycle/events - Learn how to dispatch and listen to custom events in WebComponent using the dispatch method.
- Lifecycle: /documentation/events-and-lifecycle/lifecycle - Learn how to hook into key execution stages of your WebComponent using onMount, onDestroy, onUpdate, onAdoption, onError, and Markup effects.
- Error Handling: /documentation/events-and-lifecycle/error-handling - Intercept and process runtime errors from render, state updates, styles, or lifecycles using the onError hook.
- Form Integration: /documentation/advanced/form-integration - Build form-associated custom elements with ElementInternals, submitted values, validation, disabled state, reset, and state restoration.
- Content Root & Root: /documentation/advanced/content-root-and-root - Learn how to resolve component rendering targets using contentRoot and locate ancestor contexts using root.
- Browser Globals: /documentation/advanced/browser-globals - Use WebComponent and re-exported Markup APIs via CDN and global window namespaces.