share-wc

Social share component with native Web Share API and platform fallbacks

Overview

<share-wc> provides social sharing with three-tier progressive enhancement:

Tier 1 (native) — On supported platforms, a single button triggers the OS share sheet via navigator.share()
Tier 2 (platforms) — On desktop, individual platform buttons open share URLs
Tier 3 (no JS) — Slotted <a> links work without JavaScript

Attributes

Attribute	Type	Default	Description
`url`	string	`location.href`	URL to share
`title`	string	`document.title`	Share title
`text`	string	Meta description	Share description text
`platforms`	string	`x,linkedin,bluesky,mastodon,whatsapp,email,copy`	Comma-separated platform list
`variant`	string	`icon-label`	Visual variant: `icon`, `label`, `icon-label`
`size`	string	`m`	Button size: `s`, `m`, `l`
`label`	string	`Share`	Label for Tier 1 native button
`color`	boolean	absent	Use platform brand colours
`mastodon-instance`	string	`mastodon.social`	Mastodon instance for share URL
`tier`	string	auto	Force tier: `native` or `platforms`. Overrides auto-detection.

Platforms

Choose which platforms to show with platforms. Order controls render order.

Available Platforms

ID	Label	Action
`x`	X	Opens X/Twitter compose
`twitter`	X	Alias for `x`
`facebook`	Facebook	Opens Facebook sharer
`linkedin`	LinkedIn	Opens LinkedIn share
`whatsapp`	WhatsApp	Opens WhatsApp (native app on mobile)
`telegram`	Telegram	Opens Telegram share
`bluesky`	Bluesky	Opens Bluesky compose
`mastodon`	Mastodon	Opens Mastodon share (configurable instance)
`email`	Email	Opens email client via mailto:
`copy`	Copy link	Copies URL to clipboard with 2s feedback

Variants

Icon only

Show icons without labels using variant="icon".

Label only

Show labels without icons using variant="label".

Brand colours

Add color to apply platform brand colours.

Sizes

Use size="s" or size="l" for small or large buttons.

Explicit Share Data

Override the auto-detected URL, title, and text with explicit attributes.

Meta Resolution Order

Field	Priority
URL	`url` → `<link rel="canonical">` → `location.href`
Title	`title` → `og:title` → `document.title`
Text	`text` → `meta[name=description]` → `og:description` → empty

Progressive Enhancement

For full no-JS support, slot <a> elements with data-platform attributes. The component enhances them with click handlers and substitutes {url}, {title}, {text} tokens in href values.

Force platform buttons

On devices with navigator.share (macOS, iOS, Android), the component auto-selects the native share sheet. Use tier="platforms" to always show individual platform buttons instead, giving authors full control over which platforms appear.

Native-only mode

Use platforms="native-only" to show only the native share button. Hides entirely on platforms without Web Share API support.

Mastodon Instance

Set a custom Mastodon instance with mastodon-instance. Defaults to mastodon.social.

Events

Event	Detail	Description
`share-wc:open`	`{ platform }`	Fired when a share is initiated
`share-wc:success`	`{ platform }`	Fired after successful share or copy
`share-wc:error`	`{ platform, error }`	Fired on failure (user cancel is not an error)

JavaScript API

Property/Method	Type	Description
`url`	get/set	Current share URL
`title`	get/set	Current share title
`text`	get/set	Current share description
`share()`	method	Programmatically trigger native share

Accessibility

Tier 1 button has aria-label="Share this page"
Tier 2 wraps buttons in <nav aria-label="Share this page">
Each platform button has an accessible label: "Share on X", "Copy link", etc.
Copy button announces "Copied!" via aria-live="polite"
Icons are hidden from assistive technology with aria-hidden="true"
Labels remain in the DOM for icon variant (visually hidden, not removed)
Reduced motion: transitions disabled via prefers-reduced-motion