---
title: Web Components
slug: Web/Web_Components
tags:
  - Artikel Web
  - Gambaran
  - HTML Imports
  - JavaScript
  - Landing
  - Pengembangan Web
  - Template
  - Web Components
  - component
  - custom elements
  - shadow dom
  - slot
translation_of: Web/Web_Components
---
<div>{{DefaultAPISidebar("Web Components")}}</div>

<div class="summary">
<p>Web Components adalah kumpulan fitur teknologi yang memungkinkan Anda membuat elemen khusus yang dapat digunakan kembali dengan fungsionalitasnya yang dikemas jauh dari sisa kode Anda dan menggunakannya di aplikasi web Anda.</p>
</div>

<h2 id="Konsep_dan_penggunaan">Konsep dan penggunaan</h2>

<p>Sebagai pengembang, kita semua tahu bahwa menggunakan kembali kode sebanyak mungkin merupakan ide yang bagus. Hal ini biasanya tidak mudah untuk struktur <em>markup </em>kustom memikirkan HTML kompleks (serta gaya dan skrip terkait) yang terkadang harus Anda tulis untuk memnuat kontrol UI khusus, dan bagaimana menggunakannya beberapa kali dapat mengubah halaman Anda menjadi berantankan jika Anda tidak berhati-hati.</p>

<p>Web Components bertujun untuk menyelesaikan masalah yang terdiri dari tiga teknologi utama, yang dapat digunakan bersama untuk membuat elemen kustom serbaguna dengan fungsionalitas terenkapsulasi yang dapat digunakan kembali di mana pun Anda suka tanpa takut benturan kode.</p>

<ul>
 <li><strong>Custom elements</strong>: Sekumpulan API JavaScript yang memungkinkan Anda menentukan <em>custom element </em>dan perilakunya, yang kemudian dapat digunakan sesuai keinginan di antarmuka pengguna Anda.</li>
 <li><strong>Shadow DOM</strong>: Sekumpulan API JavaScript untuk melampirkan pohon DOM "bayangan" yang dienkapsulasi ke elemen yang dirender secara terpisah dari dokumen utama DOM dan mengontrol fungsionalitas terkait. Dengan cara ini, Anda dapat membuat fitur elemen tetap bersifat pribadi, sehingga fitur tersebut dapat ditulis dan diberi gaya tanpa takut bertabrakan dengan bagian lain dari dokumen.</li>
 <li><strong>HTML templates</strong>: Elemen {{HTMLElement("template")}} dan {{HTMLElement("slot")}} memungkinkan Anda menulis template markup yang tidak ditampilkan di halaman yang dirender. Ini kemudian dapat digunakan kembali beberapa kali sebagai dasar struktur elemen kustom.</li>
</ul>

<p>Pendekatan dasar untuk mengimplementasikan <em>web component</em> biasanya terlihat seperti ini:</p>

<ol>
 <li>Buat kelas di mana Anda menentukan fungsionalitas <em>web component</em> Anda, menggunakan sintaks kelas ECMAScript 2015 (lihat <a href="https://wiki.developer.mozilla.org/id/docs/Web/JavaScript/Reference/Classes">Kelas</a> untuk informasi lebih lanjut).</li>
 <li>Daftarkan elemen kustom baru Anda menggunakan metode {{domxref ("CustomElementRegistry.define ()")}}, meneruskan nama elemen yang akan ditentukan, kelas atau fungsi di mana fungsionalitasnya ditentukan, dan secara opsional, elemen apa yang diwarisi dari.</li>
 <li>Jika perlu, lampirkan shadow DOM ke elemen khusus menggunakan metode {{domxref ("Element.attachShadow ()")}}. Tambahkan child element, event listener, dll., Ke shadow DOM menggunakan metode DOM biasa.</li>
 <li>Jika perlu, tentukan template HTML menggunakan {{htmlelement ("template")}} dan {{htmlelement ("slot")}}. Sekali lagi gunakan metode DOM biasa untuk mengkloning template dan melampirkannya ke shadow DOM Anda.</li>
 <li>Gunakan elemen kustom Anda di mana pun Anda suka di halaman Anda, seperti yang Anda lakukan pada elemen HTML biasa.</li>
</ol>

<h2 id="Tutorial">Tutorial</h2>

<dl>
 <dt><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Menggunakan custom element</a></dt>
 <dd>Panduan yang menunjukkan cara menggunakan fitur elemen khusus untuk membuat komponen web sederhana, serta melihat callback siklus proses dan beberapa fitur lanjutan lainnya.</dd>
 <dt><a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Menggunakan shadow DOM</a></dt>
 <dd>Panduan yang mempelajari dasar-dasar shadow DOM, menunjukkan cara melampirkan shadow DOM ke elemen, menambahkan ke shadow DOM tree, menatanya, dan banyak lagi.</dd>
 <dt><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Menggunakan templates and slots</a></dt>
 <dd>Panduan yang menunjukkan cara menentukan struktur HTML yang dapat digunakan kembali menggunakan elemen {{htmlelement ("template")}} dan {{htmlelement ("slot")}}, lalu menggunakan struktur tersebut di dalam komponen web Anda.</dd>
</dl>

<h2 id="Referensi">Referensi</h2>

<h3 id="Custom_elements">Custom elements</h3>

<dl>
 <dt>{{domxref("CustomElementRegistry")}}</dt>
 <dd>Berisi fungsionalitas yang terkait dengan elemen kustom, terutama metode {{domxref ("CustomElementRegistry.define()")}} yang digunakan untuk mendaftarkan elemen kustom baru sehingga dapat digunakan di dokumen Anda.</dd>
 <dt>{{domxref("Window.customElements")}}</dt>
 <dd>Mengembalikan referensi ke objek {{domxref("CustomElementRegistry.define()")}}.</dd>
 <dt><a href="/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Life cycle callbacks</a></dt>
 <dd>Fungsi panggilan balik khusus yang ditentukan di dalam definisi kelas elemen khusus, yang memengaruhi perilakunya:
 <ul>
  <li><code>connectedCallback</code>: Dipanggil saat elemen khusus pertama kali dihubungkan ke DOM dokumen.</li>
  <li><code>disconnectedCallback</code>: Dipanggil ketika elemen khusus terputus dari DOM dokumen.</li>
  <li><code>adoptedCallback</code>: Dipanggil ketika elemen kustom dipindahkan ke dokumen baru.</li>
  <li><code>attributeChangedCallback</code>: Dipanggil ketika salah satu atribut elemen khusus ditambahkan, dihapus, atau diubah.</li>
 </ul>
 </dd>
 <dd>
 <ul>
 </ul>
 </dd>
</dl>

<dl>
 <dt>Ekstensi untuk membuat elemen bawaan khusus</dt>
 <dd>
 <ul>
  <li>Atribut HTML global {{htmlattrxref ("is")}}: Memungkinkan Anda menentukan bahwa elemen HTML standar harus berperilaku seperti elemen bawaan khusus terdaftar.</li>
  <li>Opsi "is" dari metode {{domxref ("Document.createElement()")}}: Memungkinkan Anda membuat instance elemen HTML standar yang berperilaku seperti elemen bawaan khusus terdaftar yang diberikan.</li>
 </ul>
 </dd>
 <dt>CSS pseudo-classes</dt>
 <dd>Pseudo-classes yang berkaitan secara khusus dengan elemen khusus:
 <ul>
  <li>{{cssxref(":defined")}}: Mencocokkan elemen apa pun yang ditentukan, termasuk elemen bawaan dan elemen khusus yang ditentukan dengan <code>CustomElementRegistry.define()</code>).</li>
  <li>{{cssxref(":host")}}: Memilih shadow host dari shadow DOM yang berisi CSS yang digunakan di dalamnya.</li>
  <li>{{cssxref(":host()")}}: Memilih shadow host dari <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> yang berisi CSS yang digunakan di dalamnya (sehingga Anda dapat memilih elemen khusus dari dalam shadow DOM-nya) tetapi hanya jika pemilih yang diberikan sebagai parameter fungsi cocok dengan shadow host.</li>
  <li>{{cssxref(":host-context()")}}: Memilih shadow host dari <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> yang berisi CSS yang digunakan di dalamnya (sehingga Anda dapat memilih elemen khusus dari dalam shadow DOM-nya) tetapi hanya jika pemilih yang diberikan sebagai parameter fungsi cocok dengan leluhur host bayangan di tempat itu itu berada di dalam hierarki DOM.</li>
 </ul>
 </dd>
 <dd>Pseudo-elements yang berkaitan secara khusus dengan elemen khusus:
 <ul>
  <li>{{cssxref("::part")}}: Merepresentasikan elemen apa pun dalam <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow tree</a> yang memiliki atribut {{HTMLAttrxRef ("part")}} yang cocok.</li>
 </ul>
 </dd>
</dl>

<h3 id="Shadow_DOM">Shadow DOM</h3>

<dl>
 <dt>{{domxref("ShadowRoot")}}</dt>
 <dd>Merepresentasikan root node dari shadow DOM subtree.</dd>
 <dt>{{domxref("DocumentOrShadowRoot")}}</dt>
 <dd>Fitur penentu mixin yang tersedia di seluruh dokumen dan shadow roots.</dd>
 <dt>Ekstensi {{domxref("Element")}}</dt>
 <dd>Ekstensi ke antarmuka <code>Element</code> yang terkait dengan shadow DOM:
 <ul>
  <li>Metode {{domxref ("Element.attachShadow ()")}} melampirkan shadow DOM tree ke elemen yang ditentukan.</li>
  <li>Properti {{domxref ("Element.shadowRoot")}} mengembalikan shadow root yang dilampirkan ke elemen yang ditentukan, atau <code>null</code> jika tidak ada shadow root yang terpasang.</li>
 </ul>
 </dd>
 <dt>Penambahan {{domxref ("Node")}} yang relevan</dt>
 <dd>Penambahan antarmuka <code>Node</code> yang relevan dengan shadow DOM:
 <ul>
  <li>Metode {{domxref ("Node.getRootNode ()")}} mengembalikan root objek konteks, yang secara opsional menyertakan shadow root jika tersedia.</li>
  <li>Properti {{domxref ("Node.isConnected")}} mengembalikan boolean yang menunjukkan apakah Node terhubung (langsung atau tidak langsung) ke objek konteks atau tidak, misalnya objek {{domxref ("Document")}} dalam kasus DOM normal, atau {{domxref ("ShadowRoot")}} untuk shadow DOM.</li>
 </ul>
 </dd>
 <dt>Ekstensi {{domxref("Event")}}</dt>
 <dd>Ekstensi ke antarmuka <code>Event</code> yang terkait dengan shadow DOM:
 <ul>
  <li>{{domxref ("Event.composed")}}: Mengembalikan {{jsxref ("Boolean")}} yang menunjukkan apakah acara akan menyebar melintasi batas shadow DOM ke DOM standar (<code>true</code>), atau tidak (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>).</li>
  <li>{{domxref("Event.composedPath")}}: Mengembalikan event's path (objek tempat pemroses akan dipanggil). Ini tidak termasuk node dalam shadow tree jika shadow root dibuat dengan {{domxref ("ShadowRoot.mode")}} ditutup.</li>
 </ul>
 </dd>
</dl>

<h3 id="HTML_templates">HTML templates</h3>

<dl>
 <dt>{{htmlelement("template")}}</dt>
 <dd>Berisi fragmen HTML yang tidak dirender saat dokumen penampung awalnya dimuat, tetapi dapat ditampilkan saat runtime menggunakan JavaScript, terutama digunakan sebagai dasar struktur elemen khusus. Antarmuka DOM terkait adalah {{domxref ("HTMLTemplateElement")}}.</dd>
 <dt>{{htmlelement("slot")}}</dt>
 <dd>Placeholder di dalam web component yang dapat Anda isi dengan markup Anda sendiri, yang memungkinkan Anda membuat DOM tree terpisah dan menyajikannya bersama-sama. Antarmuka DOM terkait adalah {{domxref ("HTMLSlotElement")}}</dd>
 <dt>Atribut HTML global <code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code></dt>
 <dd>Menetapkan slot di shadow tree shadow DOM ke sebuah elemen.</dd>
 <dt>{{domxref("Slotable")}}</dt>
 <dd>Mixin yang diimplementasikan oleh node {{domxref ("Element")}} dan {{domxref ("Text")}}, mendefinisikan fitur yang memungkinkan mereka menjadi konten elemen {{htmlelement ("slot")}}. Mixin mendefinisikan satu atribut, {{domxref ("Slotable.assignedSlot")}}, yang mengembalikan referensi ke slot tempat node disisipkan.</dd>
</dl>

<dl>
 <dt>Ekstensi {{domxref("Element")}}</dt>
 <dd>Extensions ke antarmuka <code>Element</code> yang terkait dengan slot:
 <ul>
  <li>{{domxref("Element.slot")}}: Mengembalikan nama slot shadow DOM yang dilampirkan ke elemen.</li>
 </ul>
 </dd>
 <dt>CSS pseudo-elements</dt>
 <dd>Pseudo-elements yang berkaitan secara khusus dengan slot:
 <ul>
  <li>{{cssxref("::slotted")}}: Mencocokkan konten apa pun yang dimasukkan ke dalam slot.</li>
 </ul>
 </dd>
 <dt>Event {{event("slotchange")}}</dt>
 <dd>Diaktifkan pada instance {{domxref ("HTMLSlotElement")}} (elemen {{htmlelement ("slot")}}) saat node yang ada di slot itu berubah.</dd>
</dl>

<h2 id="Contoh">Contoh</h2>

<p>Kami sedang membangun sejumlah contoh dalam repo GitHub <a href="https://github.com/mdn/web-components-examples">contoh komponen web</a> kami. Lebih banyak akan ditambahkan seiring berjalannya waktu.</p>

<h2 id="Spesifikasi">Spesifikasi</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spesifikasi</th>
   <th scope="col">Status</th>
   <th scope="col">Komentar</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG","scripting.html#the-template-element","&lt;template&gt; element")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Definisi dari {{HTMLElement("template")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Definisi dari <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">HTML Custom Elements</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>Definisi dari <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML Imports", "", "")}}</td>
   <td>{{Spec2("HTML Imports")}}</td>
   <td>Definisi <a href="/en-US/docs/Web/Web_Components/HTML_Imports">Impor HTML</a> awal.</td>
  </tr>
  <tr>
   <td>{{SpecName("Shadow DOM", "", "")}}</td>
   <td>{{Spec2("Shadow DOM")}}</td>
   <td>Definisi <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> awal.</td>
  </tr>
 </tbody>
</table>

<h2 id="Kompabilitas_browser">Kompabilitas browser</h2>

<p>Umumnya:</p>

<ul>
 <li>Komponen web didukung secara default di Firefox (versi 63), Chrome, dan Opera.</li>
 <li>Safari mendukung sejumlah fitur komponen web, tetapi kurang dari browser di atas.</li>
 <li>Edge sedang berada implementasi pengerjaan.</li>
</ul>

<p>Untuk dukungan browser mendetail dari fitur tertentu, Anda harus membaca halaman referensi yang tercantum di atas.</p>

<h2 id="Lihat_juga">Lihat juga</h2>

<ul>
 <li><a href="https://www.webcomponents.org/">webcomponents.org</a> situs yang menampilkan contoh komponen web, tutorial, dan informasi lainnya.</li>
 <li><a href="https://www.dataformsjs.com/">DataFormsJS</a> Pustaka web component terbuka — Kumpulan Web Component yang dapat digunakan untuk membangun Single Page Apps(SPA), Menampilkan data JSON dari API dan Web service, dan mengikat data ke berbagai elemen di layar. Semua Web Component adalah JavaScript biasa dan tidak memerlukan proses pembuatan.</li>
 <li><a href="https://fast.design/" rel="noopener">FAST</a> adalah pustaka komponen web yang dibangun oleh Microsoft yang menawarkan beberapa paket untuk dimanfaatkan tergantung pada kebutuhan proyek Anda. Fast Element adalah cara yang ringan untuk dengan mudah membangun Web Component yang berkinerja, hemat memori, dan memenuhi standar. Fast Foundation adalah pustaka kelas WebComponent, templat, dan utilitas lain yang dibangun di atas elemen cepat yang dimaksudkan untuk disusun menjadi Web Component terdaftar.</li>
 <li><a href="https://github.com/hybridsjs/hybrids">Hybrids</a> Pustaka web component sumber terbuka, yang mendukung objek biasa dan fungsi murni di atas <code>class</code> dan sintaks <code><font face="consolas, Liberation Mono, courier, monospace">this</font></code>. Ini menyediakan API sederhana dan fungsional untuk membuat elemen khusus.</li>
 <li><a href="https://www.polymer-project.org/">Polymer</a> framework web component Google, satu set polyfill, penyempurnaan, dan contoh. Saat ini cara termudah untuk menggunakan komponen web lintas browser.</li>
 <li><a href="https://github.com/devpunks/snuggsi#readme">Snuggsi</a> Web Component Mudah dalam ~ 1kB Termasuk polyfill - Yang Anda butuhkan hanyalah browser dan pemahaman dasar tentang kelas HTML, CSS, dan JavaScript agar produktif.</li>
 <li><a href="https://github.com/slimjs/slim.js">Slim.js</a> Pustaka web component sumber terbuka, pustaka berkinerja tinggi untuk pembuatan komponen yang cepat dan mudah; dapat diperluas dan <em>pluggable</em> dan kompatibel <em>cross-framwork</em>.</li>
 <li><a href="https://stenciljs.com/">Stencil</a> — TToolchain untuk membangun sistem desain yang dapat digunakan kembali dan terukur dalam web component.</li>
</ul>