JSFiddle - React, Tailwind, and code Playground

HTML

<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>

JavaScript

class XProduct extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const img = document.createElement('img');
    img.alt = this.getAttribute('data-name');
    img.src = this.getAttribute('data-img');
    img.width = '150';
    img.height = '150';
    img.className = 'product-img';
        const p = document.createElement('p');
        p.text = 'test';
    shadow.appendChild(img);
    shadow.appendChild(p);
    img.addEventListener('click', () => {
      window.location = this.getAttribute('data-url');
    });
  }
}
customElements.define('x-product', XProduct);