Komponen Web HTML membuat peningkatan progresif dan enkapsulasi CSS menjadi lebih mudah! – Beragampengetahuan

Saya harus berterima kasih kepada Jeremy Keith dan artikelnya yang penuh wawasan akhir tahun lalu yang memperkenalkan saya pada konsep Komponen Web HTML. Inilah momen “aha!”

Saat Anda menggabungkan beberapa markup yang ada dalam elemen khusus dan kemudian menggunakan JavaScript untuk menerapkan beberapa perilaku baru, secara teknis Anda tidak melakukan apa pun yang tidak dapat dilakukan sebelumnya dengan beberapa traversal DOM dan penanganan peristiwa. Namun menggunakan Komponen Web untuk mencapai hal ini tidak terlalu rapuh. Ini portabel. Ini mengikuti prinsip tanggung jawab tunggal. Ia hanya melakukan satu hal, tetapi ia melakukannya dengan baik.

Sampai saat itu, saya mempunyai asumsi yang salah: semua Komponen web sepenuhnya bergantung pada kehadiran JavaScript dan Shadow DOM yang terdengar agak menakutkan. Meskipun benar bahwa Anda dapat menulis komponen Web dengan cara ini, ada cara lain. Mungkin cara yang lebih baik? Terutama jika Anda seorang pendukung peningkatan progresif seperti saya. Bagaimanapun, Komponen Web HTML hanyalah HTML.

Meskipun hal ini di luar cakupan yang sedang kita diskusikan di sini, Any Bell baru-baru ini menerbitkan sebuah artikel yang memberikan perspektifnya (yang sangat bagus) tentang apa arti peningkatan progresif.

Mari kita lihat tiga contoh nyata yang menunjukkan apa yang saya anggap sebagai fitur utama Komponen Web HTML—peluang untuk enkapsulasi gaya CSS dan peningkatan progresif—tanpa harus dipaksa untuk langsung bergantung pada JavaScript. Kami pasti akan menggunakan JavaScript, tetapi komponen tersebut akan berfungsi tanpanya.

Contoh-contoh ini dapat ditemukan di pustaka komponen Boilerplate UI Web saya (dibangun dengan Buku Cerita), serta kode sumber terkait di GitHub.

Contoh 1: <webui-disclosure>

Saya sangat menyukai cara Chris Ferdinandi mengajarkan cara membuat komponen web dari awal, menggunakan mode publik (tampilkan/sembunyikan) sebagai contoh. Contoh pertama memperluas demonstrasinya.

Mari kita mulai dengan HTML warga kelas satu. Komponen Web memungkinkan kita membuat elemen khusus dengan nama kita sendiri, seperti dalam kasus ini, <webui-disclosure> Tag yang kami gunakan untuk menyimpan <button> Dirancang untuk menampilkan/menyembunyikan blok teks dan <div> memegang <p> Teks yang ingin kita tampilkan dan sembunyikan.

<webui-disclosure
  data-bind-escape-key
  data-bind-click-outside
>
  <button
    type="button"
    class="button button--text"
    data-trigger
    hidden
  >
    Show / Hide
  </button>

  <div data-content>
    <p>Content to be shown/hidden.</p>
  </div>
</webui-disclosure>

Jika JavaScript dinonaktifkan atau tidak dijalankan (karena beberapa kemungkinan alasan), tombol akan disembunyikan secara default – terima kasih hidden atribut – dan secara default hanya konten di dalam div yang akan ditampilkan.

OKE Ini adalah contoh sederhana dari penguatan progresif di tempat kerja. Pengunjung dapat melihat konten dengan atau tanpa <button>.

Saya sebutkan bahwa contoh ini memperluas demonstrasi awal Chris Ferdinandi. Perbedaan utamanya adalah Anda dapat mengklik ESC kunci atau klik di mana saja di luar elemen. Begitulah keadaan mereka berdua [data-attribute]ada di <webui-disclosure Label untuk.

Pertama-tama kita tentukan elemen khusus agar browser mengetahui apa yang harus dilakukan dengan nama tag yang kita tulis:

customElements.define('webui-disclosure', WebUIDisclosure);

Elemen khusus harus diberi nama dengan pengidentifikasi tanda hubung, mis. <my-pizza> atau apa pun, tapi seperti yang ditunjukkan Jim Neilsen melalui Scott Jehl, itu tidak berarti tanda hubung memiliki Pilih di antara dua kata.

Saya biasanya lebih suka menulis JavaScript dalam TypeScript untuk membantu menghilangkan kesalahan konyol dan menerapkan pemrograman “defensif” pada tingkat tertentu. Namun sederhananya, struktur modul ES untuk komponen web terlihat seperti ini dalam JavaScript murni:

default class WebUIDisclosure extends HTMLElement 
  constructor() 
    super();
    this.trigger = this.querySelector('[data-trigger]');
    this.content = this.querySelector('[data-content]');
    this.bindEscapeKey = this.hasAttribute('data-bind-escape-key');
    this.bindClickOutside = this.hasAttribute('data-bind-click-outside');
    
    if (!this.trigger 

  setupA11y() 
    // Add ARIA props/state to button.
  

  // Handle constructor() event listeners.
  handleEvent(e) 
    // 1. Toggle visibility of content.
    // 2. Toggle ARIA expanded state on button.
  
  
  // Handle event listeners which are not part of this Web Component.
  connectedCallback() 
    document.addEventListener('keyup', (e) => 
      // Handle ESC key.
    );
  
    document.addEventListener('click', (e) => 
      // Handle clicking outside.
    );
  

  disconnectedCallback() 
    // Remove event listeners.
  

Penasaran dengan pendengar acara tersebut? Definisi pertama ada di constructor() berfungsi, sedangkan sisanya masuk connectedCallback() Fungsi. Hawk Ticehurst menjelaskan prinsip-prinsip tersebut dengan lebih fasih daripada yang saya bisa.

JavaScript ini tidak diperlukan agar komponen web dapat “berfungsi”, namun JavaScript menyediakan beberapa fungsi yang bagus, belum lagi pertimbangan aksesibilitas untuk membantu peningkatan bertahap yang memungkinkan <button> Tampilkan dan sembunyikan konten. Misalnya, JavaScript menyuntikkan yang sesuai aria-expanded Dan aria-controls Atribut memungkinkan mereka yang mengandalkan pembaca layar untuk memahami tujuan tombol.

Ini adalah bagian peningkatan progresif dari contoh ini.

Untuk mempermudah, saya tidak menulis CSS tambahan untuk komponen ini. Gaya yang Anda lihat hanyalah warisan dari cakupan global atau gaya komponen yang ada (misalnya, tipografi dan tombol).

Namun, contoh selanjutnya Melakukan Ada beberapa CSS dengan cakupan tambahan.

Contoh 2: <webui-tabs>

Contoh pertama menunjukkan manfaat peningkatan progresif Komponen Web HTML. Manfaat lain yang kami dapatkan adalah styling CSS-nya kemasan, Ini adalah cara yang bagus untuk mengatakan bahwa CSS tidak akan bocor dari komponen. Cakupan gaya ini adalah murni Komponen Web, dan gaya ini tidak bertentangan dengan gaya lain yang diterapkan pada halaman saat ini.

Mari kita beralih ke contoh kedua, kali ini menunjukkan kemampuan enkapsulasi gaya Komponen Web Dan Bagaimana mereka mendukung peningkatan bertahap pada pengalaman pengguna. Kita akan menggunakan komponen bertab untuk mengatur konten di Panel, yang ditampilkan ketika tab terkait panel diklik – hal yang sama akan Anda temukan di banyak pustaka komponen.

Mulailah dengan struktur HTML:

<webui-tabs>
  <div data-tablist>
    <a href="#tab1" data-tab>Tab 1</a>
    <a href="#tab2" data-tab>Tab 2</a>
    <a href="#tab3" data-tab>Tab 3</a>
  </div>

  <div id="tab1" data-tabpanel>
    <p>1 - Lorem ipsum dolor sit amet consectetur.</p>
  </div>

  <div id="tab2" data-tabpanel>
    <p>2 - Lorem ipsum dolor sit amet consectetur.</p>
  </div>

  <div id="tab3" data-tabpanel>
    <p>3 - Lorem ipsum dolor sit amet consectetur.</p>
  </div>
</webui-tabs>

Anda mendapatkan idenya: tiga tautan ditata sebagai tab yang, ketika diklik, membuka panel tab dengan kontennya. Harap dicatat bahwa masing-masing [data-tab] Target dalam daftar tab adalah tautan jangkar yang cocok dengan ID panel tab, misalnya. #tab1, #tab2DLL.

Kita akan melihat isi enkapsulasi gaya terlebih dahulu, karena kita tidak membahasnya pada contoh sebelumnya. Misalkan CSS disusun sebagai berikut:

webui-tabs 
  [data-tablist] 
    /* Default styles without JavaScript */
  
  
  [data-tab] 
    /* Default styles without JavaScript */
  

  [role="tablist"] 
    /* Style role added by JavaScript */
  
  
  [role="tab"] 
    /* Style role added by JavaScript */
  
  
  [role="tabpanel"] 
    /* Style role added by JavaScript */
  

Lihat apa yang terjadi di sini? Kami memiliki dua aturan gaya – [data-tablist] Dan [data-tab] — Berisi gaya default untuk komponen web. Dengan kata lain, gaya ini ada terlepas dari apakah JavaScript dimuat atau tidak. Sementara itu, tiga aturan gaya lainnya merupakan penyeleksi yang dimasukkan ke dalam komponen selama JavaScript diaktifkan dan didukung. Cara ini, Tiga aturan gaya terakhir hanya diterapkan ketika JavaScript gagal **role** Atribut elemen-elemen ini dalam HTML. Di sana, kami telah memberikan peningkatan progresif dengan hanya mengatur gaya ketika JavaScript diperlukan.

Semua gaya ini sepenuhnya dienkapsulasi atau dibatasi <webui-tabs> Komponen jaringan. Tidak ada “kebocoran”, bisa dikatakan, ke dalam gaya komponen web lain, atau bahkan ke hal lain di halaman secara global. Kita bahkan dapat memilih untuk tidak menggunakan nama kelas, penyeleksi kompleks, dan pendekatan mirip BEM demi penggunaan penyeleksi turunan sederhana untuk subkomponen komponen, sehingga memungkinkan kita menulis gaya secara lebih deklaratif pada elemen semantik.

Cepat: DOM “Ringan” vs. DOM Bayangan

Untuk sebagian besar proyek web, saya biasanya lebih suka menggabungkan CSS (termasuk bagian Sass Komponen Web) ke dalam satu file CSS sehingga gaya default komponen tersedia secara global, meskipun JavaScript tidak dijalankan.

Namun, stylesheet dapat diimpor melalui JavaScript, mis. Hanya digunakan oleh komponen web ini Jika JavaScript tersedia:

import styles from './styles.css';

class WebUITabs extends HTMLElement 
  constructor() 
    super();
    this.adoptedStyleSheets = [styles];
  


customElements.define('webui-tabs', WebUITabs);

Sebagai alternatif, kita dapat menyuntikkan a <style> Tag yang berisi gaya komponen:

class WebUITabs extends HTMLElement 
  connectedCallback() 
    this.attachShadow( mode: 'open' ); // Required for JavaScript access
    this.shadowRoot.innerHTML = `
      <style> <!-- styles go here --> </style>
      // etc.
    `;
  

    
customElements.define('webui-tabs', WebUITabs);

Apa pun metode yang Anda pilih, gaya ini diterapkan langsung ke komponen Web, mencegah kebocoran gaya komponen namun memungkinkan gaya global diwariskan.

Sekarang perhatikan contoh sederhana ini. Segala sesuatu yang kita tulis di antara tag pembuka dan penutup suatu komponen dianggap sebagai bagian dari DOM “Ringan”.

<my-web-component>
  <!-- This is Light DOM -->
  <div>
    <p>Some content... styles are inherited from the global scope</p>
  </div>

  ----------- Shadow DOM Boundary -------------
  | <!-- Anything injected by JavaScript -->  |
  ---------------------------------------------
</my-web-component>

Dave Rupert memiliki artikel bagus yang memudahkan untuk melihat bagaimana gaya eksternal “menembus” Shadow DOM dan memilih elemen di Light DOM. harap dicatat caranya <button> Menulis elemen di antara tag elemen khusus yang diterima button Gaya pemilih ada dalam CSS global, sementara <button> Konten yang dimasukkan melalui JavaScript tetap tidak berubah.

Jika kita ingin menata Shadow DOM <button> Kita harus menggunakan gaya internal (seperti contoh di atas) untuk mengimpor stylesheet atau menyuntikkan inline <style> buntu.

ini tidak berarti semua Properti gaya CSS diblokir oleh Shadow DOM. Faktanya, Dave menguraikan 37 properti Komponen Web inheritterutama dalam format teks, daftar, dan tabel.

Gunakan JavaScript untuk menyempurnakan komponen tab secara bertahap

Meskipun contoh kedua lebih banyak membahas enkapsulasi gaya, ini masih merupakan peluang bagus untuk melihat kemampuan peningkatan progresif yang sebenarnya kami dapatkan dari Komponen Web secara gratis. Sekarang mari masuk ke JavaScript dan lihat cara mendukung peningkatan progresif. Kode lengkapnya cukup panjang, jadi saya telah menyingkatnya sedikit untuk membantu memperjelas poin utamanya.

default class WebUITabs extends HTMLElement 
  constructor() 

  createTabs() 
    // 1. Hide all tabpanels initially.
    // 2. Add ARIA props/state to tabs & tabpanels.
  

  bindClickEvent(e) 
    e.preventDefault();
    // Show clicked tab and update ARIA props/state.
  
  bindKeyboardEvent(e, index) 
    e.preventDefault();
    // Handle keyboard ARROW/HOME/END keys.
  


customElements.define('webui-tabs', WebUITabs);

JavaScript memasukkan peran, status, dan properti ARIA ke dalam tab dan blok konten untuk pengguna pembaca layar, serta pengikatan tombol tambahan sehingga kita dapat bernavigasi antar tab menggunakan keyboard, misalnya; TAB Kuncinya dicadangkan untuk mengakses tab aktif komponen dan konten apa pun yang dapat difokuskan dalam tab aktif tabpaneldan tab tersedia ARROW kunci. Jadi, jika JavaScript gagal dimuat, pengalaman default masih dapat diakses, di mana tab masih tertambat pada panelnya masing-masing, dan panel secara alami ditumpuk secara vertikal, satu di atas yang lain.

Apakah JavaScript diaktifkan dan didukung? Kami mendapatkan pengalaman yang lebih baik dan catatan aksesibilitas yang diperbarui.

Contoh 3: <webui-ajax-loader>

Contoh terakhir berbeda dari dua contoh pertama karena: Dihasilkan seluruhnya oleh JavaScriptDan Menggunakan Bayangan DOM. Ini karena ini hanya digunakan untuk menunjukkan status “memuat” permintaan Ajax dan oleh karena itu hanya diperlukan ketika JavaScript diaktifkan.

Tag HTML hanyalah tag komponen pembuka dan penutup:

<webui-ajax-loader></webui-ajax-loader>

Struktur JavaScript yang disederhanakan:

default class WebUIAjaxLoader extends HTMLElement 
  constructor() 
    super();
    const shadow = this.attachShadow( mode: 'open' );
    shadow.innerHTML = `
      <svg role="img" part="svg">
        <title>loading</title>
        <circle cx="50" cy="50" r="47" />
      </svg>
    `;
  


customElements.define('webui-ajax-loader',WebUIAjaxLoader);

Harap dicatat, tepat di luar gerbang semuanya di antara <webui-ajax-loader> Tag tersebut dimasukkan dengan JavaScript, yang berarti semuanya ada di Shadow DOM, dienkapsulasi dari skrip dan gaya lain, bukan dipaketkan langsung dengan komponen.

Tapi perhatikan juga part properti diaktifkan <svg> elemen. Di sinilah kami ingin memperbesar:

<svg role="img" part="svg">
  <!-- etc. -->
</svg>

Berikut cara lain untuk menata elemen khusus: Beri nama bagiannya. Sekarang kita bisa menata SVG luar Teks template yang kita gunakan untuk membuat elemen. ada satu ::part Penyeleksi semu untuk mencapai ini:

webui-ajax-loader::part(svg) 
  // Shadow DOM styles for the SVG...

Ini sesuatu yang keren: penyeleksi dapat mengakses properti kustom CSS terlepas dari apakah cakupannya bersifat global atau lokal pada elemen tersebut.

webui-ajax-loader 
  --fill: orangered;


webui-ajax-loader::part(svg) 
  fill: var(--fill);

Sejauh menyangkut peningkatan progresif, JavaScript menyediakan semua HTML. Artinya, loader hanya akan dirender jika JavaScript diaktifkan dan didukung. Saat muncul, SVG ditambahkan, berisi judul yang dapat diakses, dll.

bungkus

Ini adalah contohnya! Saya harap Anda sekarang memiliki pencerahan yang sama seperti yang saya alami ketika saya membaca postingan Jeremy Keith: Komponen Web HTML adalah fungsionalitas yang mengutamakan HTML.

Tentu saja, JavaScript memang memainkan peran penting, tetapi hanya jika diperlukan. Butuh kemasan lebih banyak? Ingin menambahkan beberapa manfaat pengalaman pengguna bila browser pengunjung Anda mendukungnya? Itulah gunanya JavaScript, dan mengapa Komponen Web HTML merupakan tambahan yang bagus untuk platform Web – mereka mengandalkan bahasa Web umum untuk melakukan tugas yang dirancang untuk mereka lakukan, tanpa menjadi terlalu bergantung pada salah satunya.

Komponen Web HTML membuat peningkatan progresif dan enkapsulasi CSS menjadi lebih mudah! Awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.