function Foo() {

  HTMLElement.call(this)

​

// Create a shadow root

    var shadow = this.attachShadow({mode: 'open'});

​

    // Create a standard img element and set it's attributes.

    var 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';

​

    // Add the image to the shadow root.

    shadow.appendChild(img);

​

    // Add an event listener to the image.

    img.addEventListener('click', () => {

      window.location = this.getAttribute('data-url');

    });

​

    // Create a link to the product.

    var link = document.createElement('a');

    link.innerText = this.getAttribute('data-name');

    link.href = this.getAttribute('data-url');

    link.className = 'product-name';

​

    // Add the link to the shadow root.

    shadow.appendChild(link);

}

​

Foo.prototype = Object.create(HTMLElement.prototype)

Foo.prototype.constructor = Foo

​

customElements.define("my-foo", Foo);