ndf-elements/src/templates/my-skip-link.tpl.html

My collection of useful custom elements.

<meta name="robots" content="noindex">

<template id="my-skip-link-template">
  <style>
  a[ href ] {
    font: 1.1rem sans-serif;
    height: 1px;
    width: 1px;
    position: absolute;
    overflow: hidden;
    left: 3px;
    top: 3px;
  }
  a:focus {
    background: var(--my-skip-background, lightyellow); /* #ffffe0 */
    border: 2px solid darkorange;
    border-radius: .25rem;
    color: blue;
    height: auto;
    width: auto;
    padding: .5rem;
    transition: all .5s;
    /* Fix: ensure link appears on top of other absolute/relative content. */
    z-index: 999;
  }
  </style>

  <a href="#main-content" part="a"><slot> Skip to main content </slot></a>
</template>