A lightweight, customizable Web Component for enhanced dropdown/select elements with zero dependencies
npm install @devzenix-ui/react-selectsrc/index.js and include it in your project:
html
`
$3
`bash
npm install @devzenix-ui/react-select
`
$3
`html
`
Usage
$3
`html
label="Choose an option"
name="mySelect"
value="option2">
`
$3
You can define options directly in HTML using a JSON attribute:
`html
label="Choose an option"
options='[
{"value": "1", "label": "One"},
{"value": "2", "label": "Two"},
{"value": "3", "label": "Three"}
]'>
`
$3
`javascript
// Get the element
const select = document.querySelector('select-component');
// Set options programmatically
select.setOptions([
{ value: '1', label: 'Option One' },
{ value: '2', label: 'Option Two' },
{ value: '3', label: 'Option Three' }
]);
// Get/set value
console.log(select.value); // Get current value
select.value = '2'; // Set value
// Listen for changes
select.addEventListener('value-change', (e) => {
console.log('New value:', e.detail.value);
});
// Disable/enable
select.setAttribute('disabled', ''); // Disable
select.removeAttribute('disabled'); // Enable
`
$3
#### React
`jsx
import { useRef, useEffect } from 'react';
function MyComponent() {
const selectRef = useRef(null);
useEffect(() => {
if (selectRef.current) {
selectRef.current.setOptions([
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' }
]);
}
}, []);
return ;
}
`
#### Vue
`vue
ref="mySelect"
label="Choose option"
@value-change="handleChange">
`
API Reference
$3
| Attribute | Type | Description | Example |
|-----------|------|-------------|---------|
| label | string | Text label above the select | label="Choose option" |
| name | string | Name attribute for form submission | name="country" |
| value | string | Currently selected value | value="us" |
| disabled | boolean | Disable the select element | disabled |
| options | JSON string | Options array in JSON format | options='[{"value":"1","label":"One"}]' |
$3
| Property | Type | Description | Example |
|----------|------|-------------|---------|
| value | string | Get/set the current value | select.value = '2' |
$3
| Method | Parameters | Description | Example |
|--------|------------|-------------|---------|
| setOptions() | options: Array<{value, label}> | Set available options | select.setOptions([{value: '1', label: 'One'}]) |
$3
| Event | Detail | Description |
|-------|--------|-------------|
| value-change | { value: string } | Fired when the selected value changes |
$3
Style the component using CSS shadow parts:
`css
/ Style the label /
select-component::part(label) {
font-weight: bold;
color: #333;
}
/ Style the select element /
select-component::part(select) {
border-color: #007bff;
border-radius: 8px;
}
`
Styling Examples
$3
`css
select-component {
font-family: 'Arial', sans-serif;
}
select-component::part(label) {
font-size: 14px;
margin-bottom: 8px;
color: #555;
}
select-component::part(select) {
padding: 10px 15px;
border: 2px solid #ddd;
border-radius: 6px;
min-width: 200px;
}
select-component::part(select):focus {
outline: none;
border-color: #007bff;
}
`
$3
`css
.select-primary::part(select) {
background: #007bff;
color: white;
border-color: #0056b3;
}
.select-success::part(select) {
background: #28a745;
color: white;
border-color: #1e7e34;
}
`
Development
$3
No build process required! This is a zero-dependency project.
1. Clone or download the project
2. Open src/index.js in your editor
3. Make changes as needed
4. Test directly in your browser
$3
`
select/
āāā src/
ā āāā index.js # Main Web Component implementation
āāā memory-bank/ # Project documentation
āāā package.json # NPM package configuration
āāā README.md # This file
āāā .clinerules/ # Cline AI assistant rules
`
$3
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request
Browser Compatibility
| Browser | Version | Status |
|---------|---------|--------|
| Chrome | 54+ | ā
Supported |
| Firefox | 63+ | ā
Supported |
| Safari | 10.1+ | ā
Supported |
| Edge | 79+ | ā
Supported |
Performance
- Bundle Size: ~3KB uncompressed
- Minified: ~1.5KB estimated
- Gzipped: <1KB estimated
- Runtime: Fast instantiation via template cloning
- Memory: Low overhead with single template reuse
Security
- XSS Prevention: Uses textContent for user-provided data
- Safe JSON Parsing: Try-catch error handling for attribute parsing
- No eval(): No dynamic code execution
- Content Security Policy: Compatible with strict CSP policies
License
MIT License - see LICENSE file for details
Support
- š Documentation: Check the memory-bank/` directory for detailed technical documentation