--- url: https://developer-portal.gainsight.com/docs/custom-widgets/v2/core-concepts.md description: >- How custom widgets are loaded, initialized, and managed at runtime — the init contract, lifecycle, props, design tokens, and best practices --- # Widget Runtime This page explains how custom widgets are loaded, initialized, and managed by the platform. It covers the runtime model that applies to **all** widgets regardless of framework — React, Vue, vanilla JavaScript, or anything else. ## How Widgets Run Every widget runs inside a **Shadow DOM** that the platform creates for you. The Shadow DOM isolates your widget's styles and markup from the host page. At runtime, the platform also creates the **`sdk` object** that gives your code access to props, events, and the shadow root where your widget renders. Your widget's entry file is an HTML fragment, not a full document — no ``, ``, or `` tags (see [Your First Widget](build-first-widget)). At the top level it may contain only an inline `