Enhancement: Add Web Component / Lit wrapper — new custom element and demo page section

## 🎯 Direction

SocialShareButton is a **lightweight, zero-dependency, framework-agnostic** social sharing component. Wrapping it as a native Web Component (Custom Element) would make it truly universal — usable in any HTML page, any framework, or no framework at all, purely through a `` HTML tag. This is the most framework-agnostic enhancement possible and aligns directly with the library's core mission. Lit is used as a minimal base class (~5KB) to reduce boilerplate.

📹 **See the button in action**: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM

---

## 📁 Files to Create / Modify

### ✅ New File: `src/social-share-button-element.js`

A native Web Component wrapping the core vanilla JS library:

```javascript
import { LitElement } from 'lit';

class SocialShareButtonElement extends LitElement {
static properties = {
url: { type: String },
title: { type: String },
description: { type: String },
hashtags: { type: Array },
via: { type: String },
platforms: { type: Array },
theme: { type: String },
buttonText: { type: String, attribute: 'button-text' },
customClass: { type: String, attribute: 'custom-class' },
buttonStyle: { type: String, attribute: 'button-style' },
modalPosition: { type: String, attribute: 'modal-position' }
};

// Render into light DOM so existing CSS applies
createRenderRoot() { return this; }

connectedCallback() {
super.connectedCallback();
if (typeof window !== 'undefined' && window.SocialShareButton) {
this._shareButton = new window.SocialShareButton({
container: this,
url: this.url || window.location.href,
title: this.title || document.title,
description: this.description || '',
hashtags: this.hashtags || [],
via: this.via || '',
platforms: this.platforms || ['whatsapp','facebook','twitter','linkedin','telegram','reddit'],
theme: this.theme || 'dark',
buttonText: this.buttonText || 'Share',
customClass: this.customClass || '',
buttonStyle: this.buttonStyle || 'default',
modalPosition: this.modalPosition || 'center'
});
}
}

updated(changedProperties) {
if (this._shareButton) {
const opts = {};
changedProperties.forEach((_, key) => { opts[key] = this[key]; });
this._shareButton.updateOptions(opts);
}
}

disconnectedCallback() {
if (this._shareButton) {
this._shareButton.destroy();
this._shareButton = null;
}
super.disconnectedCallback();
}
}

customElements.define('social-share-button', SocialShareButtonElement);
export default SocialShareButtonElement;
```

---

### ✅ Existing File: `index.html` — Add Web Components Section

Add a new section with:
- Section heading: `🧩 Web Component Integration`
- Step 1: Include CSS, JS, and the element script via CDN
- Step 2: Use the custom element directly in HTML

Example code snippet to display:

```html

```

---

## ✅ Acceptance Criteria

- [ ] `src/social-share-button-element.js` created as a Lit-based Custom Element
- [ ] SSR guard (`typeof window !== 'undefined'`) present in `connectedCallback`
- [ ] `disconnectedCallback` calls `destroy()` to prevent memory leaks
- [ ] `updated()` calls `updateOptions()` on attribute/property changes
- [ ] Custom element registered as ``
- [ ] `index.html` updated with a Web Components section containing install + usage snippets
- [ ] Copy-to-clipboard button present on new code blocks in `index.html`
- [ ] README updated to list Web Components / Lit as a supported integration

---

> ⚠️ **Planned — Not Final**
> This issue represents a planned enhancement and is **not guaranteed to be implemented**. It may be dropped if it does not align with the repository's direction. **Before opening a pull request, please discuss with the maintainers in this issue thread.**