GameShare

Methods

.define(tag, registry)
.subscribe(context, callback)

CSS Custom Properties

Property	Default	Description
`--game-share-copied`	`#6ee7b7`	Color of the button when the result has been copied

Shadow DOM Parts

Part	Description
`button`	The share button
`fallback`	The readonly textarea shown as a last-resort copy fallback

Slots

Slot	Description
(default)	Free-form share message content; `` elements are resolved to their text values

A share button that lets the player share their result. Uses a progressive fallback chain to maximize compatibility across browsers and devices.

When the user clicks the share button, the component attempts each strategy in order:

Web Share API (navigator.share) — Native OS share sheet. Used on mobile browsers and supporting desktops.
Clipboard API (navigator.clipboard.writeText) — Copies the text silently and shows a "Copied!" confirmation.
Legacy execCommand (document.execCommand("copy")) — Fallback for older browsers.
Manual copy textarea — If all else fails, reveals a read-only <textarea> pre-filled with the share text so the user can copy manually.

The share text is taken from the light DOM content of the element (via textContent). Empty lines are stripped. Use <game-signal> children to inject live values such as score or a shareable URL:

<game-share>
  I scored <game-signal key="score" format="ms"></game-signal> on Reaction Time!
  Can you beat it? <game-signal key="url"></game-signal>
</game-share>

There are no text or hashtag attributes. All share text comes from the slot.

Usage

<div when-some-scene="result" data-overlay>
  <game-result-stat label="Score" format="ms"></game-result-stat>
  <game-share>
    I scored <game-signal key="score" format="ms"></game-signal>!
    <game-signal key="url"></game-signal>
  </game-share>
  <button commandfor="game" command="--restart">Play Again</button>
</div>