1. Load initial styles
Start with global Diwa stylesheet loading so tokens are available before components upgrade.
<link rel="stylesheet" href="/stencil/diwa-components.css" />Partials Introduction
Partials are integration building blocks for app bootstrapping, compatibility, and loading quality. Use them to keep custom-element initialization predictable and reduce avoidable UI flash or fallback gaps.
Prerequisites
- - Diwa package installed and a global app shell in place.
- - Control over root head/body tags for early style and loader setup.
- - A testing path to validate upgraded custom-element behavior.
Integration Flow (3 Steps)
2. Register components once
Load or run the component loader once in your root client bootstrap.
<Script
src="/stencil/diwa-components.esm.js"
type="module"
strategy="beforeInteractive"
/>3. Apply optional compatibility/performance partials
Add fallback and preload helpers only when your support matrix or metrics justify them.
<link rel="modulepreload" href="/stencil/diwa-components.esm.js" />
<script>/* browser support fallback check */</script>Available Partials Guides
Loader Script
Implementation notes and practical snippets.
Initial Styles
Implementation notes and practical snippets.
Component Chunk Links
Implementation notes and practical snippets.
DSR Ponyfill
Implementation notes and practical snippets.
Browser Support Fallback
Implementation notes and practical snippets.
Troubleshooting Notes
- - If interactions fail after first render, verify loader registration order.
- - If token colors are missing, check initial stylesheet path and load timing.
- - If fallback scripts trigger unexpectedly, review feature detection and CSP constraints.