\n \n\n```\n\n## 📚 Documentation\n\n- **[Complete Documentation](./docs/documentation.html)** - Comprehensive guide with API reference\n- **[Interactive Examples](./docs/examples.html)** - Live demos and use cases\n- **[TypeScript Support](./TYPESCRIPT.md)** - Type-safe development guide\n\n## 🌐 Online Resources\n\n- **Home Page:** [htmlcompo.sarthak2004.com](https://htmlcompo.sarthak2004.com/)\n- **NPM Package:** [html-compo](https://www.npmjs.com/package/html-compo)\n- **GitHub:** [html-compo.js](https://github.com/SarthakWhenever/html-compo.js)\n\n## 📦 Installation\n\n### CDN (Recommended)\n```html\n\n```\n\n### NPM\n```bash\nnpm install html-compo\n```\n\nThen import in your project:\n```javascript\nimport 'html-compo';\n```\n\n## ✨ Key Features\n\n- 🎯 **Zero Dependencies** - Pure JavaScript, no framework required\n- 📝 **Simple Syntax** - Use familiar HTML with `@{variable}` templating\n- 🔧 **Attribute Binding** - Pass data through HTML attributes\n- 🎨 **Shadow DOM Support** - Encapsulated styling with `fragment=\"true\"`\n- 🔗 **Component References** - Access and manipulate components via `ref` attribute\n- 📱 **Framework Agnostic** - Works with any existing HTML/JavaScript project\n- 🚀 **TypeScript Ready** - Full type definitions included\n\n## 🏃♂️ Basic Usage\n\n### 1. Define Components\n```html\n\n \n
\n
Hello, @{self.data}!
\n
This is a reusable component.
\n
\n \n\n```\n\n### 2. Use Components\n```html\nWorld\nHTML-COMPO.js\n```\n\n### 3. With Attributes\n```html\n\n\n\n \n
\n
@{name}
\n
Role: @{role}
\n
Email: @{email}
\n
\n \n\n```\n\n## 🎮 Interactive Examples\n\nCheck out our [interactive examples page](./docs/examples.html) featuring:\n\n- 📊 **Dashboard Components** - Real-time stats and user management\n- 🛒 **Shopping Cart** - Add/remove items with dynamic totals\n- 💬 **Chat Interface** - Message components with different types\n- 📈 **Data Visualization** - Progress bars and charts\n- 🎮 **Mini Games** - Interactive number guessing game\n- 🎨 **Theme System** - Dynamic theme switching\n\n## 🔗 API Reference\n\n### Global API\n```javascript\n// Get component by reference\nconst component = htmlCompo.getComponent('my-ref');\n\n// Manipulate component content\ncomponent.html('New content');\ncomponent.attr('class', 'new-class');\n```\n\n### Template Variables\n- `@{self.data}` - Content inside component tags\n- `@{self.componentName}` - Component tag name\n- `@{attributeName}` - Values from component attributes\n\n### Component Definition\n```html\n\n \n \n \n\n```\n\n## 🎯 Advanced Features\n\n### Shadow DOM Encapsulation\n```html\n\n \n \n
@{self.data}
\n \n\n```\n\n### Component References\n```html\n\n\n\n```\n\n## 💾 TypeScript Support\n\nHTML-COMPO.js includes full TypeScript support:\n\n```typescript\n// Type-safe component access\nconst component = window.htmlCompo.getComponent('my-ref');\nif (component) {\n const content: string = component.html();\n component.attr('class', 'new-class');\n}\n```\n\nSee [TypeScript documentation](./TYPESCRIPT.md) for complete setup instructions.\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nMIT License - see [LICENSE](./LICENSE) file for details.\n\n## 👨💻 Author\n\n**Sarthak Pokharel**\n- GitHub: [@SarthakWhenever](https://github.com/SarthakWhenever)\n- NPM: [html-compo](https://www.npmjs.com/package/html-compo)\n\n","readmeFilename":"README.md"}