A polyfill for `button type="share"`

sharebutton.js

// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/

/* Use <button type="share"> in your HTML.
Include this JavaScript in a <script> element on the same page or in an external script.
The script checks for three ways of sharing:
1. Native support for <button type="share">.
2. Support for the JavaScript Web Share API.
3. A mailto: link.
This will share the current URL and page title.
*/

(function (win, doc) {
const testButton = doc.createElement('button');
testButton.setAttribute('type','share');
if (testButton.type != 'share') {
  win.addEventListener('click', function(ev) {
    ev = ev || win.event;
    let target = ev.target;
    let button = target.closest('button[type="share"]');
    if (button) {
      const title = doc.querySelector('title').innerText;
      const url = win.location.href;
      if (navigator.share) {
        navigator.share({ title: title, url: url });
      } else {
        win.location.href='mailto:?subject='+title+'&body='+url;
      }
    }
  });
}
}(this, this.document));

Blog post: A polyfill for button type="share"

Codepen demo

In Safari 14.0, my experience with the navigator.share API and the default Mail app is that the title property is ignored, the text property is added to the body of the message, and the url is appended below it on a new line.