Example of a custom element to prefetch a link's `href`

index.html

<prefetched-link href="https://prefetch-this-href.example.org">
  This link's href is prefetched if the user is on a fast network
</prefetched-link>

prefetched-link.mjs

export default function PrefetchedLink({ html, state }) {
  const href = state.attrs.href

  return html`
    <a href="${href}">
      <slot></slot>
    </a>

    <script type="module">
      class PrefetchedLink extends HTMLElement {
        constructor() {
          super()
          this.anchor = this.querySelector('a')
          this.href = this.anchor.getAttribute('href')
        }

        connectedCallback() {
          if (window.navigator.connection.effectiveType === '4g') {
              //generate link prefetch tag
              const linkTag = document.createElement('link')
              linkTag.rel = 'prefetch'
              linkTag.href = this.href
              linkTag.as = 'document'

              //inject tag in the head of the document
              document.head.appendChild(linkTag)
          }
        }
      }

      window.customElements.define('prefetched-link', PrefetchedLink)
    </script>
  `
}