Mulai Chrome versi 135, tombol memperkenalkan `command` dan `commandfor`

• Tombol sangat penting untuk membangun aplikasi web dinamis. Digunakan untuk membuka menu, mengganti aksi, dan mengirim formulir
• Di Chrome 135, atribut baru command dan commandfor menyempurnakan sekaligus menggantikan atribut sebelumnya popovertargetaction dan popovertarget
• Masalah yang muncul saat mengimplementasikan perilaku tombol dengan cara lama:
  • Handler onclick di HTML bisa dibatasi penggunaannya dalam kode nyata karena kebijakan keamanan (CSP)
  • Perlu sinkronisasi status antara tombol dan elemen lain, dan kode untuk mengelola status sambil menjaga aksesibilitas menjadi kompleks
  • Di React, AlpineJS, Svelte, dan lainnya pun penanganan status serta event tetap kompleks

Pola command dan commandfor

• Dengan atribut command dan commandfor, tombol dapat bertindak secara deklaratif terhadap elemen lain. Ini memberikan kenyamanan seperti framework sambil tetap mempertahankan fleksibilitas
• Tombol commandfor menggunakan ID (mirip atribut for), dan command menerima nilai bawaan untuk memberikan pendekatan yang lebih intuitif
• Contoh: implementasi tombol buka menu
  • Tidak memerlukan aria-expanded maupun JavaScript tambahan

  <button commandfor="my-menu" command="show-popover">  
    Open Menu  
  </button>  
  <div popover id="my-menu">  
    <!-- ... -->  
  </div>  
  

command dan commandfor vs popovertargetaction dan popovertarget

• Jika Anda pernah menggunakan popover, Anda mungkin sudah familier dengan atribut popovertarget dan popovertargetaction
• Keduanya bekerja mirip dengan commandfor dan command, tetapi khusus untuk popover
• Atribut baru ini sepenuhnya menggantikan atribut lama sekaligus menyediakan fungsi tambahan

Perintah bawaan

• Atribut command memiliki perilaku bawaan yang dipetakan ke berbagai API
  • show-popover: dipetakan ke el.showPopover()
  • hide-popover: dipetakan ke el.hidePopover()
  • toggle-popover: dipetakan ke el.togglePopover()
  • show-modal: dipetakan ke dialogEl.showModal()
  • close: dipetakan ke dialogEl.close()
• Contoh: implementasi dialog konfirmasi penghapusan
  • Status dan aksesibilitas dapat dikelola tanpa JavaScript

  <button commandfor="confirm-dialog" command="show-modal">  
    Delete Record  
  </button>  
  <dialog id="confirm-dialog">  
    <header>  
      <h1>Delete Record?</h1>  
      <button commandfor="confirm-dialog" command="close" aria-label="Close">  
        <img role="none" src="/close-icon.svg">  
      </button>  
    </header>  
    <p>Are you sure? This action cannot be undone</p>  
    <footer>  
      <button commandfor="confirm-dialog" command="close" value="cancel">  
        Cancel  
      </button>  
      <button commandfor="confirm-dialog" command="close" value="delete">  
        Delete  
      </button>  
    </footer>  
  </dialog>  
  

  • Kode penanganan hasil: nilai balikan dapat diproses pada event close dialog

  dialog.addEventListener("close", (event) => {  
    if (event.target.returnValue === "cancel") {  
      console.log("Cancel was clicked");  
    } else if (event.target.returnValue === "delete") {  
      console.log("Delete was clicked");  
    }  
  });  
  

Perintah kustom

• Selain perintah bawaan, Anda juga dapat mendefinisikan perintah kustom dengan prefiks --
• Perintah kustom memicu event "command" pada elemen target, tetapi tidak menjalankan logika tambahan
• Contoh: implementasi perintah rotasi gambar

  <button commandfor="the-image" command="--rotate-landscape">  
    Landscape  
  </button>  
  <button commandfor="the-image" command="--rotate-portrait">  
    Portrait  
  </button>  
  <img id="the-image" src="photo.jpg">  
  
  <script type="module">  
    const image = document.getElementById("the-image");  
    image.addEventListener("command", (event) => {  
      if (event.command === "--rotate-landscape") {  
        image.style.rotate = "-90deg";  
      } else if (event.command === "--rotate-portrait") {  
        image.style.rotate = "0deg";  
      }  
    });  
  </script>  
  

Penanganan perintah di Shadow DOM

• Di Shadow DOM, karena commandfor bekerja berdasarkan ID, ada batasan berikut:
  • Referensi elemen antar-Shadow DOM tidak dimungkinkan
  • Dalam kasus ini, Anda dapat menggunakan JavaScript API untuk menetapkan properti .commandForElement
• Contoh: menghubungkan perintah di Shadow DOM

  <my-element>  
    <template shadowrootmode="open">  
      <button command="show-popover">Show popover</button>  
      <slot></slot>  
    </template>  
    <div popover><!-- ... --></div>  
  </my-element>  
  
  <script>  
    customElements.define("my-element", class extends HTMLElement {  
      connectedCallback() {  
        const popover = this.querySelector('[popover]');  
        this.shadowRoot.querySelector('button').commandForElement = popover;  
      }  
    });  
  </script>  
  

Rencana ke depan

• Chrome berencana menambahkan lebih banyak perintah bawaan:
  • membuka dan menutup elemen <details>
  • dukungan perintah show-picker pada <input> dan <select>
  • perintah pemutaran untuk <video> dan <audio>
  • fungsi menyalin teks dari elemen

[GN⁺]

Opini Hacker News

• Para ahli teori bahasa pemrograman telah berspekulasi sejak tahun 80-an tentang "comefrom", versi yang lebih kuat dari "goto". Ini hanya pernah diimplementasikan di intercal. intercal lebih unggul daripada bahasa seperti C dalam hal keamanan, performa, dan ergonomi manusia, tetapi mengalami kesulitan menembus pasar komersial. Menarik melihat javascript mengintegrasikan fitur intercal ini. Semoga ini dapat memicu lonjakan pemrograman yang sopan, seperti halnya objek berbasis closure di javascript mendorong pemrograman fungsional ke arus utama

• Invokers bukan hanya milik Chrome. Ini juga sudah tersedia di Firefox nightly

• Gagasan menerapkan perilaku UI deklaratif tanpa JS itu menarik

  • Menghilangkan boilerplate untuk popover/modal (tidak perlu memanipulasi aria-expanded)
  • Perintah bawaan seperti show-modal mengintegrasikan aksesibilitas ke dalam markup
  • Perintah kustom (mis., --rotate-landscape) memungkinkan komponen mengekspose API melalui HTML

• Pertanyaan:

  • Abstraksi vs. sihir: apakah ini hanya memindahkan kompleksitas dari JS ke HTML? Framework sudah mengabstraksikan state. Bagaimana ini akan hidup berdampingan?
  • Gesekan Shadow DOM: JS diperlukan untuk menetapkan .commandForElement di antara shadow root. Ini tampak seperti masalah yang baru terselesaikan setengahnya
  • Kesiapan masa depan: jika OpenUI menambahkan lebih dari 20 perintah (mis., show-picker, toggle-details), apakah platform akan membengkak dengan sintaks khusus?

• Spesifikasi:

  • elemen button, atribut commandfor
  • elemen button, atribut command

• Apakah ini pola action/messaging yang digunakan Next, Be, Apple, dan lainnya sekitar 30 tahun lalu, atau saya melewatkan sesuatu?

  • Ini memang berguna, tetapi berevolusi menjadi pola controller berbasis interface karena kompleksitas dalam mempertahankan pola desain dasar. Jadi jika kotak ini dibuka, saya memperkirakan akan ada banyak permintaan perbaikan

• Toolkit UI Java awal milik Netscape (IFC) memungkinkan pengaitan elemen action

• Atribut command dan commandfor yang baru memperbaiki dan menggantikan atribut popovertargetaction dan popovertarget

  • Apakah ini sekarang tersedia secara default? Apa maksudnya menggantikan? Apakah suatu saat nanti ini akan dihapus? Pengembang web tidak bisa menghapus hal yang tidak lagi diperlukan hanya lewat pembaruan

• Saya benar-benar alergi terhadap pemrograman dengan string. Saya paham manfaat aksesibilitasnya, tetapi saya tidak terlalu antusias menggunakan ID elemen sebagai lapisan perilaku web app lainnya

• Ini seharusnya tidak diimplementasikan tanpa API yang lengkap. Alih-alih sekitar 5 perintah, ini tampak seperti bisa mengimplementasikan semua kemampuan JavaScript melalui HTML. Itu bisa berarti ribuan perintah

• Saya sempat berharap tentang command and conquer di HTML

• Memperbaiki dan memperluas HTML itu bagus, tetapi jalan masih panjang. Tim HTMX punya beberapa ide yang bagus