2-lit-element/solutions/3-render-articles.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <script type="module">
    import {LitElement, html, css} from 'https://unpkg.com/lit-element@2.0.0-rc.5?module';

    class MyElement extends LitElement {
      static get properties() {
        return {
          articles: { type: Array }
        };
      }

      constructor() {
        super();

        // by default, there are no articles
        this.articles = [];
      }

      connectedCallback() {
        super.connectedCallback();

        fetch('https://newsapi.org/v2/everything/<your-api-key-goes-here>')
          .then(response => response.json())
          .then(response => {
            this.articles = response.articles;
          })
      }

      render() {
        return html`
          <ul>
            <!-- use a map function to repeat a template -->
            ${this.articles.map(article => html`
              <li>${article.title}</li>
            `)}
          </ul>
        `;
      }
    }

    customElements.define('my-element', MyElement);
  </script>
</head>

<body>
  <my-element></my-element>
</body>
</html>