RedditFeedRow

reddit-feed-row.js

const RedditFeedRowTemplate = `
<style>
  :host {
    display: block;
  }
  div {
    display: flex;
  }

  div > * {
    padding: 8px;
  }
</style>
<img>
<h2 id="title"></h2>`;

class RedditFeedRowElement extends HTMLElement {
  createdCallback() {
    this.root = this.createShadowRoot();
    this.template = document.createElement('div')
    this.template.innerHTML = RedditFeedRowTemplate;
  }

  attachedCallback() {
    const listing = this.data.data;

    this.template.querySelector('#title').innerHTML = listing.title;

    const thumbnail = this.template.querySelector('img');

    if (listing.thumbnail !== 'self') {
      thumbnail.src = listing.thumbnail;
    } else {
      thumbnail.style.display = 'none';
    }

    this.root.appendChild(this.template);
  }

}

const RedditFeedRow = document.registerElement('reddit-feed-row', RedditFeedRowElement);