HTML Web Components Demo

📝 Basic Tables

💡 Pengantar Web Components

Web Components memungkinkan pembuatan elemen HTML kustom dengan shadow DOM, HTML templates, dan custom elements.

component.html

          
            <!-- Membuat template untuk Web Component -->

            <template id="my-element">

              <style>

                p { color: red; font-weight: bold; }

              </style>

              <p>Hello from Web Component!</p>

            </template>

            <!-- Definisi Custom Element -->

            <script>

              class MyElement extends HTMLElement {

                constructor() {

                  super();

                  const template = document.getElementById('my-element').content;

                  this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));

                }

              }

              customElements.define('my-element', MyElement);

            </script>

            <!-- Memanggil Custom Element -->

            <my-element></my-element>

🔍 Penjelasan Detail:
• <template> digunakan untuk mendefinisikan markup komponen.
• class extends HTMLElement membuat custom element.
• attachShadow() membuat Shadow DOM agar style terisolasi.
• customElements.define() mendaftarkan elemen baru ke browser.

⚡ Pro Tips

Gunakan Web Components untuk membuat UI reusable tanpa ketergantungan library eksternal.