Custom Element - HTML Web Component

Custom Element - HTML Web Component

by Jitendra Zaa

HTML

<div style="height:300px;">
  <h1>Custom Element - Web Component - HTML 5 </h1>

  <movie-card name="Lord of the Rings" detail="A meek Hobbit from the Shire and eight companions set out on a journey to destroy the powerful One Ring and save Middle-earth from the Dark Lord Sauron.">
  </movie-card>
  <movie-card name="Star Wars - IV" detail="Luke Skywalker joins forces with a Jedi Knight, a cocky pilot, a Wookiee and two droids to save the galaxy from the Empire's world-destroying battle station, while also attempting to rescue Princess Leia from the mysterious Darth Vader.">
  </movie-card>
</div>

JavaScript

class DemoCustomElement extends HTMLElement {
  constructor() {
    super();
    let innerHTML = `
                   <h1> ${this.name}  </h1>
                   <p> ${this.detail}  </p> 
                            `;

    this.innerHTML = innerHTML;
  }

  set name(val) {
    this.setAttribute("name", val);
  }

  get name() {
    return this.getAttribute('name');
  }

  set detail(val) {
    this.setAttribute("detail", val);
  }

  get detail() {
    return this.getAttribute('detail');
  }

  connectedCallback() {
    console.log('Element inserted in DOM');
  }

  disconnectedCallback() {
    console.log('Element removed from DOM');
  }

}

window.customElements.define('movie-card', DemoCustomElement);