Nested Custom Element - Contoh Nested Custom Element Di Javascript - Information And Technology

Nested Custom Element - Contoh Nested Custom Element Di Javascript

Saat menggunakan elemen kustom, mungkin ada kasus di mana kita memerlukan elemen kustom untuk berada di dalam elemen kustom lain. Sebagai contoh, banyak situs web yang sekarang menampilkan data sebagai daftar, baik itu daftar barang atau barang belanjaan.
Biasanya, setiap daftar yang ditampilkan terdapat dalam wadah. Kemudian elemen yang sama dirender lagi dan lagi dengan data yang berbeda di dalam wadah.
20200310191307a4fe82d6dd70b4daae920036121ba5c4.gif
Komponen Web dapat membantu Anda dengan mudah mengatur daftar item yang ditampilkan sebagai daftar menggunakan wadah. Caranya adalah dengan membuat dua custom element yaitu container dan element. Wadah digunakan untuk menampung elemen suatu barang. Selain container, juga disediakan data (array). Penampung kemudian akan membuat elemen item berdasarkan data yang diberikan.
Belum ada bayang seperti apa? Berikut ini contohnya :

  1. <!DOCTYPE html>

  2. <html>

  3.  <head>

  4.    <meta charset="utf-8">

  5.    <meta name="viewport" content="width=device-width">

  6.    <title>repl.it</title>

  7.    <link href="style.css" rel="stylesheet" type="text/css" />

  8.  </head>

  9.  <body>

  10.    <script src="script.js" type="module"></script>

  11.  </body>

  12. </html>



  1. import "./article-list.js";

  2. import articles from "./articles.js";

  3.  

  4.  

  5. const articleListElement = document.createElement("article-list");

  6. articleListElement.articles = articles;

  7.  

  8.  

  9. document.body.appendChild(articleListElement);



  1. import "./article-item.js"

  2.  

  3.  

  4. class ArticleList extends HTMLElement {

  5.  set articles(articles) {

  6.    this._articles = articles;

  7.    this.render();

  8.  }

  9.  

  10.  

  11.  render() {

  12.    this._articles.forEach(article => {

  13.      const articleItemElement = document.createElement("article-item");

  14.      // memanggil fungsi setter article() pada article-item.

  15.      articleItemElement.article = article;

  16.      this.appendChild(articleItemElement);

  17.    })

  18.  }

  19. }

  20.  

  21. customElements.define("article-list", ArticleList);




  1. class ArticleItem extends HTMLElement {

  2.  set article(article) {

  3.    this._article = article;

  4.    this.render();

  5.  }

  6.  

  7.  

  8.  render() {

  9.    this.innerHTML = `

  10.     <img class="featured-image" src="${this._article.featuredImage}">

  11.     <div class="article-info">

  12.         <h2><a href="${this._article.id}">${this._article.title}</a></h2>

  13.         <p>${this._article.description}</p>

  14.     </div>

  15.   `;

  16.  }

  17. }

  18.  

  19.  

  20. customElements.define("article-item", ArticleItem);



  1. const articles = [

  2.  {

  3.    id: 1,

  4.    title: "Lorem Ipsum Dolor",

  5.    featuredImage: "https://i.picsum.photos/id/204/536/354.jpg",

  6.    description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

  7.  

  8.  

  9.  },

  10.  {

  11.    id: 2,

  12.    title: "Lorem Ipsum Dolor",

  13.    featuredImage: "https://i.picsum.photos/id/209/536/354.jpg",

  14.    description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

  15.  

  16.  

  17.  },

  18.  {

  19.    id: 3,

  20.    title: "Lorem Ipsum Dolor",

  21.    featuredImage: "https://i.picsum.photos/id/206/536/354.jpg",

  22.    description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

  23.  

  24.  

  25.  },

  26.  {

  27.    id: 4,

  28.    title: "Lorem Ipsum Dolor",

  29.    featuredImage: "https://i.picsum.photos/id/212/536/354.jpg",

  30.    description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

  31.  

  32.  

  33.  }

  34. ]

  35.  

  36.  

  37. export default articles;




  1. * {

  2.     padding: 0;

  3.     margin: 0;

  4.     box-sizing: border-box;

  5.   }

  6.   

  7.   body {

  8.     padding: 16px;

  9.   }

  10.   

  11.   article-list {

  12.     display: block;

  13.     max-width: 800px;

  14.     margin: 0 auto;

  15.   }

  16.   

  17.   article-item {

  18.     display: block;

  19.     margin-bottom: 18px;

  20.     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

  21.     border-radius: 10px;

  22.     overflow: hidden;

  23.   }

  24.   

  25.   article-item > .featured-image {

  26.     width: 100%;

  27.     max-height: 300px;

  28.     object-fit: cover;

  29.     object-position: center;

  30.   }

  31.   

  32.   article-item > .article-info {

  33.     padding: 24px;

  34.   }

  35.   

  36.   article-item > .article-info > p {

  37.     margin-top: 10px;

  38.   }



Pada kode di atas kita dapat melihat bahwa terdapat dua buah custom component yakni <article-list> dan <article-item>. Pada article-list.js ada fungsi setter articles yang berperan untuk menyimpan nilai articles pada properti this._articles

  1. set articles(articles) {

  2.    this._articles = articles;

  3.    this.render();

  4. }


Kemudian properti tersebut digunakan pada fungsi render() untuk ditampilkan satu persatu melalui <article-item>.

  1. render() {

  2.    this._articles.forEach(article => {

  3.      const articleItemElement = document.createElement("article-item");

  4.      // memanggil fungsi setter article() pada article-item.

  5.      articleItemElement.article = article;

  6.      this.appendChild(articleItemElement);

  7.    })

  8. }


Dengan cara ini akan lebih mudah untuk menampilkan data di script.js. Kita tidak perlu melakukan proses perulangan lagi di sana karena proses tersebut langsung dilakukan ketika menggunakan element <article-list>. Kita cukup memberikan nilai array yang akan ditampilkan.

  1. import "./article-list.js";

  2. import articles from "./articles.js";

  3.  

  4. const articleListElement = document.createElement("article-list");

  5. articleListElement.articles = articles;

  6.  

  7. document.body.appendChild(articleListElement);


Semakin mudah kita menggunakan suatu elemen, semakin baik, bukan? Meskipun mungkin tampak agak rumit untuk dicapai, Anda harus ingat bahwa komponen web ini dapat digunakan kembali. Artinya, jika kita ingin membuat komponen serupa, kita tidak perlu membuatnya dari awal.Dengan 
menjalankan kode di atas, maka hasilnya akan terlihat seperti ini:
202003101921481bcb54550f43e9958256358a3c73709b.png

Subscribe to receive free email updates:

0 Response to "Nested Custom Element - Contoh Nested Custom Element Di Javascript"

Posting Komentar