share-button Web Component

In the intersect between Zach sharing his Web Components, Jeremy talking about declarative sharing buttons and all y'all (gestures vaguely at blogs a Mastodon) talking about HTML Web Components there lies me and my urge to noodle around with small bits of JavaScript.

Lately I've been working on Web Components that bundle up things I wish I had in HTML. Small benefits that add to my markup. First up is a way to hook up into native sharing options.

`share-button`

<share-button> is a Web Component that turns a regular <button> element into a button that can invoke the native sharing options within the OS.

Usage

The <share-button> component can be used with the help of a script tag like so:

<script type="module" src="share-button.js"></script>

<share-button>
  <button>Share</button>
</share-button>

share-button example usage

Due to the nature of Web Components it's possible to provide a clean fallback experience, using the :defined and :not() selectors:

share-button:not(:defined) button,
share-button:defined a {
  display: none;
}

example CSS fallback

In the example code above the button will be hidden if the <share-button> isn't defined, but if it is defined the fallback anchor element will be hidden.

share-button

Usage

Further reading

`share-button`