h-frag.ts

import { WebComponent, html } from 'web-component-base'

class HFrag extends WebComponent {
  static props = {
    as: 'h1',
    hover: false
  }
  
  text: string
  constructor () {
    super()
    this.text = this.textContent
  }

  get template() {
    const id = this.text
      .match(/[A-Z]?[a-z]+|[0-9]+/g)
      .join('-')
      .toLowerCase()
    const addWidth = this.props.hover ? 'width:40px;' : ''
    return html`
      <${this.props.as}>
        <a
          style="display:flex"
          href="#${id}"
          onMouseOver=${() => this.props.hover = true }
          onMouseOut=${() => this.props.hover = false }>
            <span style="overflow:hidden;width:0;transition: width 0.3s;${addWidth}">🔗</span>
            <span>${this.text}</span>
        </a>
      </${this.props.as}>
    `;
  }
}

customElements.define('h-frag', HFrag)