gigya-comments.html

<!-- Defines element markup -->
<template id="gigya-comments-template">
  <style>
  .comment {
    margin-bottom: 20px;
  }
  .author {
    display: block;
    font-style: italic;
  }
  </style>
  <h2>Comments</h2>
  <div class="comments"></div>
</template>
<script>
  'use strict'

  const ownerDocument = (document._currentScript || document.currentScript).ownerDocument;

  class GigyaComments extends HTMLElement {  
    constructor() {
      super();
      this.template = ownerDocument.querySelector('#gigya-comments-template');
    }

    connectedCallback() {
      const articleId = this.getAttribute('article-id');
      const params = {
        categoryID: "ArticleComments",
        streamID: articleId,
        callback: this._renderComments.bind(this),
        threadLimit: 3
      };
      gigya.comments.getComments(params);      
    }   

    _renderComments(response) {
      const instance = this.template.content.cloneNode(true);

      let commentsContent = '';
      for (let index in response.comments) {
        commentsContent += '<div class="comment">';
        commentsContent += '<span class="author">' + response.comments[index].sender.name + '</span>';
        commentsContent += response.comments[index].commentText;
        commentsContent += '</div>';
      }
      const commentContainer = instance.querySelector('.comments');
      commentContainer.innerHTML = commentsContent;    

      const shadowRoot = this.attachShadow({mode: 'open'});  
      shadowRoot.appendChild(instance);                  
    } 
  }
  
  const gigyaScript = document.createElement('script');
  gigyaScript.src = '//cdns.gigya.com/JS/gigya.js?apiKey=2_bkQWNsWGVZf-fA4GnOiUOYdGuROCvoMoEN4WMj6_YBq4iecWA-Jp9D2GZCLbzON4';
  gigyaScript.async = true;
  gigyaScript.onload = () => {
    // Wait until gigya is loaded to define the element.
    window.customElements.define('gigya-comments', GigyaComments);
  }
  document.querySelector('head').appendChild(gigyaScript);
  
</script>