movielist.js

const template = document.createElement('template');
template.innerHTML = `
  <style>
    :host {
      display: block;
      text-align: center;
    }
    button {
      border: 2px solid blue;
      cursor: pointer;
      margin: 25px;
    }
    input {
      border: 2px solid black;
      margin: 5px;
    }
    ul {
      list-style: none;
      padding: 25px;
    }
  </style>
  <h1>My Movie List (2019)</h1>
  <div>
    <input id="name" type="text" placeholder="Enter movie name"/>
  </div>
  <div>
    <input id="date" type="text" placeholder="Enter release date"/>
  </div>
  <button>Add</button>

  <ul id="movies"></ul>
`;

class MovieList extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({'mode': 'open'});
    this._shadowRoot.appendChild(template.content.cloneNode(true));
    this.$movieList = this._shadowRoot.querySelector('ul');
  }
}

window.customElements.define('movie-list', MovieList);