Bisa membuat dan menggunakan tag HTML sendiri secara langsung

• Di HTML, meskipun memakai nama tag yang tidak dikenali, browser akan tetap menanganinya sebagai elemen biasa
• Jika nama tag tersebut ditentukan sebagai selector di CSS, maka pemberian style dan kontrol tampilan bisa dilakukan
• Menggunakan nama yang mengandung tanda hubung (-) dapat mencegah benturan dengan standar HTML di masa depan
• Alih-alih atau, memakai tag kustom yang bermakna dapat meningkatkan keterbacaan kode
• Bahkan dalam struktur nested yang kompleks, struktur lebih mudah dipahami hanya dari nama tag, sehingga perawatan jadi lebih mudah

---

Pemanfaatan tag HTML kustom

• Browser merender tag yang tidak dikenal seperti elemen blok biasa

  • Ini adalah perilaku normal yang dijelaskan dalam standar HTML, dan tampilannya dapat dikendalikan secara visual jika style ditetapkan di CSS
  • Sebagai contoh, tag seperti `` bisa didefinisikan dan dihias di CSS dalam bentuk cool-thing { ... }

• Jika nama tag menyertakan tanda hubung (-), maka tidak akan berbenturan dengan penambahan pada standar HTML di masa depan sehingga tidak ada risiko konflik

  • Contoh: ,

Peningkatan keterbacaan dan struktur

• Menggunakan tag dengan nama yang bermakna alih-alih atau membuat kode lebih mudah dipahami
  • Misalnya, bisa diganti dengan
• Dalam struktur `` yang bertingkat, posisi tag penutup sulit dikenali, tetapi dengan nama tag yang eksplisit struktur menjadi lebih jelas
  • Jika di dalam ada, ``, dan sebagainya, maka struktur DOM lebih intuitif untuk dipahami

Contoh kode

• Cara lama

  
    Hello, World!
  
  

• Cara dengan tag kustom

  
    Hello, World!
  
  

  • Di CSS, style bisa ditetapkan dalam bentuk cool-thing { display: block; font-weight: bold; text-align: center; ... }

Kesimpulan

• Dengan memanfaatkan fitur definisi tag yang fleksibel yang diizinkan oleh standar HTML, kita bisa menulis markup struktural yang lebih mudah dibaca
• Namun, jika sudah ada tag bermakna yang didefinisikan, maka menggunakan tag yang sudah ada tetap menjadi prioritas

[GN⁺]

Pendapat Hacker News

• Menekankan bahwa bukanlah tag yang tidak dikenali Memperkenalkan [tulisan blog](https://dashed-html.github.io) miliknya, dan menjelaskan bahwa diperlakukan sebagai HTMLUnknownElement sampai WHATWG menambahkannya sebagai elemen baru, tetapi adalah **HTMLElement yang valid** sehingga berguna untuk layout dan styling Jika di-upgrade dengan JavaScript Custom Elements API, itu menjadi **custom element yang terdefinisi** Ini adalah perilaku standar di semua browser, dan W3C HTML Validator juga mengakui custom element yang mengandung dash sebagai HTMLElement Namun aturan `[hidden]{display:none}` dari stylesheet UA bawaan tidak diwariskan, jadi harus ditentukan sendiri Fakta bahwa secara default memiliki display:block juga berkat stylesheet UA, jadi untuk custom element kita perlu mengatur properti display sendiri Dengan selector CSS :defined dan :not(:defined), elemen yang terdefinisi dan belum terdefinisi bisa dibedakan Declarative Shadow DOM (``) juga dengan cara yang sama membuat custom element yang belum terdefinisi

  • Membantah bahwa menurut Chromium ini bukan masalah stylesheet UA, melainkan karena hidden adalah atribut presentasional HTML (presentation attribute) Stylesheet UA diterapkan sama pada custom element, dan tidak ada aturan [hidden] hidden adalah contoh di mana atribut itu sendiri ditafsirkan sebagai style, seperti align="right"
  • Menyesalkan bahwa seandainya bisa memakai titik dua (:) alih-alih dash (-), integrasi namespace XML akan terasa lebih alami Menyebut bahwa di nginx atau apache, titik dua pun bisa diubah menjadi tanda hubung Menutup dengan nada nostalgia, “kita tidak bisa kembali ke tahun 1999”
  • Mempertanyakan mengapa cara ini bukan praktik default

• Menunjukkan bahwa struktur nested pada contoh kode terlalu berlebihan Menyarankan bahwa memakai **tag semantik** seperti, , dan akan lebih tepat

  • Menunjukkan bahwa custom tag, tidak seperti atribut class, hanya bisa punya satu nama Class bisa ada banyak dan tidak memiliki urutan, sedangkan custom element yang bersarang memaksakan urutan, sehingga sulit mengekspresikan hal yang sama
  • Menganalisis bahwa yang buruk bukan “div soup”-nya, melainkan keputusan desain HTML yang menggabungkan struktur dan style secara kuat Itu masuk akal pada 1996, tetapi dinilai tidak lagi demikian sekarang

• Membagikan pengalaman memakai custom element selama 3–4 tahun Idenya cerdas, tetapi rumit dalam praktik Jika terlalu banyak custom tag dipakai, keterbacaan menurun dan sulit membedakan blok dengan inline Dengan pendekatan yang seimbang, tag bawaan tetap dipakai apa adanya, dan custom tag hanya digunakan untuk elemen berbentuk komponen seperti atau Subkomponen dibedakan lewat atribut slot, misalnya `` Mereka lebih suka membatasi class hanya untuk modifikasi dan kustomisasi, sementara struktur diekspresikan lewat slot

  • Mengatakan sangat tertarik pada pendekatan web component yang seimbang, lalu meminta contoh atau toolkit Memperkenalkan Good.HTML buatannya, dan menjelaskan bahwa itu mendukung autohook, interpolasi berbasis template literal, dan struktur komponen yang tertata Menambahkan bahwa custom element self-closing seperti < !app-header /> juga diimplementasikan dengan trik comment node
  • Bertanya apakah untuk menyeleksi berdasarkan atribut slot di CSS cukup menulis seperti div[slot="hero-blurb"]
  • Menyebut bahwa pola ini mengingatkan pada struktur block–element milik BEM

• Secara default custom tag berperilaku seperti `` Jika perlu, perilakunya bisa didefinisikan melalui Custom Element API

  • Mengungkapkan bahwa pada 2014 mereka pernah memakai custom element secara luas, dan menyayangkan React menjadi arus utama Mereka merasa bagi kebanyakan pengguna, kombinasi HTML + custom element akan lebih baik daripada SPA
  • Mengatakan bahwa sebaiknya elemen semantik diprioritaskan, dan custom element hanya dipakai bila diperlukan Membagikan contoh Hypalink buatan mereka, sambil menyoroti bahwa Web Components kurang dihargai

• Memperkenalkan custom tag bernama yang dibuat untuk menjalankan peran kebalikan dari Saat JS dinonaktifkan, area tertentu bisa disembunyikan Membagikan tautan proyek

  • Mengusulkan bahwa fitur CSS @media (scripting) bisa memberi efek yang sama hanya dengan CSS murni Melampirkan tautan referensi dokumen MDN

• Membagikan pengalaman pernah menciptakan ulang tag `` yang dulu dihapus dari browser Itu dibuat dengan jQuery dan manipulasi visibility, dan mereka terkejut mengetahui browser mengizinkan tag arbitrer Karena kodenya hanya sekitar 10 baris, mereka tidak mempublikasikannya, tetapi menduga banyak percobaan serupa sudah ada

  • Menjelaskan bahwa sebenarnya sebagian besar browser tidak pernah mengimplementasikan ``, dan hanya Firefox dan Opera yang mendukungnya sampai 2013
  • Mengungkapkan bahwa mereka masih menyayangkan hilangnya Flash
  • Mengatakan bahwa efek `` juga bisa dibuat hanya dengan CSS, lalu membagikan contoh kode Jika memakai selector blink alih-alih .blink, efeknya akan diterapkan langsung ke tag
  • Mengatakan bahwa perilaku seperti `` punya makna yang terlalu besar untuk disediakan sebagai elemen HTML sederhana, jadi mereka senang fitur itu dihapus

• Menunjukkan bahwa contoh seperti dan sebenarnya bisa diganti dengan tag HTML nyata Menggunakan , , dan `` akan lebih tepat

  • Menambahkan bahwa memakai tag HTML yang sudah didefinisikan sebelumnya juga memberi keuntungan berupa styling bawaan browser

• Custom tag pada dasarnya dirender inline seperti ``, tetapi properti display default bisa ditentukan lewat CSS Dulu ini dihindari karena masalah namespace, tetapi setelah standar mengizinkan tanda hubung (-), risiko bentrokan hilang Ini juga bekerja baik dalam selector CSS, dan bisa diakses lewat querySelector Terasa bahwa bahkan tanpa framework seperti Vue, HTML modern saja sudah cukup ekspresif

  • Menambahkan bahwa elemen nonstandar yang mengandung dash diperlakukan sebagai HTMLElement, bukan HTMLUnknownElement Ini adalah desain agar saat di-upgrade di masa depan, rantai prototipe dapat diperluas secara alami

• Jika ingin menetapkan style default untuk semua custom element, bisa dilakukan seperti berikut

  :where(:not(:defined)) {
    display: block;
  }
  

  • Mengatakan bahwa inilah cara yang mereka cari, sambil menyampaikan kekaguman dan terima kasih

• Mengenang bahwa IE lama dulu tidak mengenali tag HTML5, jadi sekitar tahun 2010 mereka menyelesaikannya dengan skrip buatan sendiri Begitu tag dibuat sekali lewat JS, IE akan mengenalinya, dan setelah itu tidak masalah meski dihapus Dari situ mereka sadar bahwa tag arbitrer pun bisa dirender dengan cara ini Mereka juga membagikan tulisan blog saat itu

  • Menambahkan bahwa html5shim yang dulu populer juga bekerja dengan cara yang sama