Skip to main content Accessibility Feedback

How to build a Share This button using HTML Web Components and JavaScript

Earlier this week, I walked through how to build a “copy to clipboard” button using HTML Web Components.

Over on my YouTube channel, I ended up working on a similar project: how to build a “Share This” button.

This one uses the navigator.share() method: an asynchronous function that triggers the OS-native share card in supporting browsers.

In this video, you’ll see me…

  1. Add basic functionality
  2. Check for browser support
  3. Add accessibility features
  4. Provides options and settings for customization

You can grab the full source code on GitHub, and watch on YouTube to see me code it in real-time.