The <web-share-wrapper> component

The <web-share-wrapper> is a web component that you can use to enhance your website with the Web Share API. If the API is available, the component will replace its contents with a single share button or a template that you provide.

The component only activates if the Web Share API is available, otherwise it will just show it's contents.

The component has 5 potential attributes you can use:

text: Sets the text on the share button.
template: An id for a <template> element. The component will find the template, hydrate it and add it as the child of the component. This overrides the text attribute.
sharetitle: Sets the title to be shared.
sharetext: Sets the text to be shared. Falls back to the text contents of the <title> element.
shareurl: Sets the URL to be shared. Fallsback to the href of the canonical link, failing that window.location.href.

Examples

If you are using a browser that supports the Web Share API, you should see share buttons below. Otherwise, you will see the default a Twitter share intent link.

Plain button

Giving the component a text attribute will output a button with that text.

Share on Twitter

<web-share-wrapper text="Share" sharetext="Check out the web-share-wrapper web component" shareurl="https://github.com/philnash/web-share-wrapper">
  <a href="https://twitter.com/intent/tweet/?text=Check%20out%20%40philnash's%20web-share-wrapper%20web%20component&url=https%3A%2F%2Fgithub.com%2Fphilnash%2Fweb-share-wrapper">
    Share on Twitter
  </a>
</web-share-wrapper>

Using a template

Giving the component a template attribute with the id of a <template> element will hydrate the template and use it as the contents of the component. Check the source for the template. It doesn't use shadow DOM, so you can style it like your other buttons.

Share on Twitter

<web-share-wrapper template="share-button" sharetext="Check out the web-share-wrapper web component" shareurl="https://github.com/philnash/web-share-wrapper">
  <a href="https://twitter.com/intent/tweet/?text=Check%20out%20%40philnash's%20web-share-wrapper%20web%20component&url=https%3A%2F%2Fgithub.com%2Fphilnash%2Fweb-share-wrapper">
    Share on Twitter
  </a>
</web-share-wrapper>