A custom web component that embeds caniuse.com browser compatibility data for a specific feature.

<caniuse-embed> Element

English | 简体中文

A lightweight, customizable web component that embeds caniuse.com browser compatibility data for specific web features. Built with Lit and designed to seamlessly integrate into any web project.

🌟 Live Demo

✨ Features

• 🎯 Easy Integration: Drop-in web component that works with any framework or vanilla HTML
• 🎨 Theme Support: Auto, light, and dark themes that adapt to your design
• 📱 Responsive: Automatically adjusts height based on content
• ⚡ Lightweight: Built with Lit for minimal bundle size
• 🛠️ Customizable: Configure data source, time range, and appearance
• 🔒 Type Safe: Full TypeScript support with comprehensive type definitions

🚀 Quick Start

CDN (Recommended)

Add the script tag to your HTML:

1

<script src="https://unpkg.com/@cell-x/caniuse-embed-element/dist/caniuse-embed-element.iife.js"></script>

Then use the component:

1

<caniuse-embed feature="css-grid"></caniuse-embed>

NPM Installation

1

npm install @cell-x/caniuse-embed-element

1

import '@cell-x/caniuse-embed-element'

📖 Usage Examples

Basic Usage

1

<caniuse-embed feature="css-grid"></caniuse-embed>

With Baseline Support

Display browser compatibility baseline information for features:

1

<caniuse-embed feature="css-grid" baseline></caniuse-embed>

With Custom Configuration

1
2
3
4
5
6
7
8

<caniuse-embed
  feature="flexbox"
  theme="dark"
  past="3"
  future="2"
  baseline
  origin="https://caniuse.lruihao.cn"
></caniuse-embed>

Framework Integration

Here’s an example using Vue.js. For more framework integration examples, see FRAMEWORK_INTEGRATION.md.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<script setup>
import '@cell-x/caniuse-embed-element'
</script>

<template>
  <div>
    <caniuse-embed
      feature="css-grid"
      theme="dark"
      :past="3"
      :future="2"
    />
  </div>
</template>

⚙️ API Reference

Attributes/Properties

About Baseline

The baseline attribute displays the Baseline browser compatibility status for web features. When enabled, it shows whether a feature is:

• Widely Available - Supported across all major browsers
• Newly Available - Recently became available in major browsers
• Limited Availability - Not yet available in all major browsers

This provides a quick visual indicator of feature adoption and helps developers make informed decisions about using web platform features.

Finding Feature Names

Feature names correspond to the identifiers used on caniuse.com. You can find them in:

• The URL path: https://caniuse.com/css-grid → feature name is css-grid
• The search results on caniuse.lruihao.cn
• The caniuse-db repository

Common Feature Examples

• css-grid - CSS Grid Layout
• flexbox - Flexible Box Layout
• arrow-functions - Arrow Functions
• webp - WebP Image Format
• css-variables - CSS Custom Properties
• async-functions - Async/Await Functions
• …

CSS Classes

• .ciu-embed-iframe - The embedded iframe element
• .ciu-embed-empty - Empty state when no feature is specified

🌐 Browser Support

This web component works in all modern browsers that support:

• Custom Elements v1
• Shadow DOM v1
• ES2015+ features

🔧 Development

Prerequisites

• Node.js 20+
• pnpm 10+

Setup

1
2
3
4
5
6
7
8
9

# Clone the repository
git clone https://github.com/Lruihao/caniuse-embed-element.git
cd caniuse-embed-element

# Install dependencies
pnpm install

# Start development server
pnpm dev

Build

1
2
3
4
5
6
7

# Build all formats
pnpm build:all

# Build specific formats
pnpm build:lib    # ES modules and types
pnpm build:iife   # IIFE for CDN usage
pnpm build        # Demo build

Scripts

• pnpm dev - Start development server
• pnpm build - Build demo
• pnpm build:lib - Build library (ES modules + types)
• pnpm build:iife - Build IIFE bundle for CDN
• pnpm build:all - Build all formats
• pnpm lint - Run ESLint
• pnpm preview - Preview built demo

📦 Distribution

The package provides multiple build formats:

• ES Modules (dist/) - For modern bundlers
• IIFE Bundle (dist/caniuse-embed-element.iife.js) - For CDN usage
• TypeScript Definitions (dist/types/) - For TypeScript projects

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

🙏 Acknowledgements

• pengzhanbo/caniuse-embed
• mdn-browser-compat-data - Comprehensive browser compatibility data from MDN
• Fyrd/caniuse - The raw browser support data

Made with ❤️ by Lruihao