cross-framework-web-components-4

card.ts

...
@customElement('card-image')
export class Card extends LitElement {
    ...
    @query('#card-link') cardLinkEl!: HTMLAnchorElement;
    
    render() {
      return html`
        <li class="card">
          <div class="img">
            <img
              src="${this.card.image}"
              alt="${this.card.altText}"
              @mousedown="${this.mouseDown}"
              @mouseup="${this.handleClick}"
            />
          </div>
          <div class="text">
            <h2>
              <a
                id="card-link"
                href="${this.card.link}"
                @mousedown="${this.mouseDown}"
                @mouseup="${this.handleClick}"
                aria-describedby="desc-a-card"
                >${this.card.title}</a
              >
            </h2>
            <p>${this.card.text}</p>
            <span class="cta" aria-hidden="true" id="desc-a-card"
              ><a href="${this.card.link}">${this.card.ctaText}</a>
            </span>
            <small><a href="${this.card.textDescLink}">${this.card.textDesc}</a></small>
          </div>
        </li>
      `;
  }
  
  mouseDown() {
    this.down = Number(new Date());
  }
  
  handleClick() {
    this.up = Number(new Date());
    const total = this.up - this.down;
    if (total < 200) {
      this.cardLinkEl.click();
    }
  }
  
}