Komponen web HTML menjadikan peningkatan progresif dan enkapsulasi CSS lebih mudah!

artikel wawasan Jeremy Keith tahun lalu memperkenalkan saya kepada komponen web HTML, wahyu yang mengubah pendekatan saya kepada pembangunan web. Titik utamanya bergema dengan mendalam: sementara anda

boleh mencapai hasil yang sama dengan manipulasi DOM dan pengendalian acara, komponen web menawarkan penyelesaian yang lebih mantap, mudah alih, dan dikekalkan, mematuhi prinsip tanggungjawab tunggal.

Kesalahpahaman awal saya adalah bahawa semua komponen web bergantung semata -mata pada JavaScript dan Shadow Dom. Walaupun ini mungkin, pendekatan yang unggul, terutamanya untuk penyokong peningkatan progresif, memanfaatkan keupayaan HTML yang melekat komponen web. Mereka, pada asasnya, HTML. Kerja baru -baru ini Andy Bell memberikan konteks lebih lanjut mengenai peningkatan progresif (walaupun di luar skop artikel ini).

Mari kita meneroka tiga contoh yang mempamerkan ciri -ciri utama: enkapsulasi CSS dan kemungkinan peningkatan progresif, tanpa kebergantungan JavaScript wajib untuk fungsi asas. JavaScript akan digunakan untuk meningkatkan pengalaman, tetapi fungsi teras tetap utuh walaupun tanpa itu. Contoh -contoh ini, bersama -sama dengan kod sumber mereka, boleh didapati di Perpustakaan Komponen Boilerplate Web saya (buku cerita) di GitHub.

Contoh 1:

<webui-disclosure></webui-disclosure>

Diilhamkan oleh tutorial Chris Ferdinandi mengenai membina komponen web dari awal dengan menggunakan corak pendedahan, contoh ini berkembang pada demo.

Inti adalah HTML. Komponen web membenarkan nama elemen tersuai; Di sini,

mengandungi butang untuk menunjukkan/menyembunyikan teks dalam <webui-disclosure></webui-disclosure>. <div> <pre class="brush:php;toolbar:false">&lt;webui-disclosure data-bind-click-outside=&quot;&quot; data-bind-escape-key=&quot;&quot;&gt; Show / Hide &lt;div data-content=&quot;&quot;&gt; &lt;p&gt;Content to be shown/hidden.&lt;/p&gt; &lt;/div&gt; &lt;/webui-disclosure&gt;</pre> <p> dengan JavaScript dilumpuhkan, butang (tersembunyi melalui atribut <code>hidden) tidak dapat dilihat, dan kandungannya dipaparkan. Ini menunjukkan peningkatan progresif yang mudah. Kandungan boleh diakses tanpa mengira JavaScript.

Ini memanjangkan demo Ferdinandi dengan menambahkan penutupan melalui kunci ESC atau klik di luar elemen (menggunakan data-attribute s). Elemen tersuai ditakrifkan:

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

Nama elemen tersuai Gunakan putus-putus (mis., <my-component></my-component>). Walaupun dash biasanya memisahkan kata -kata, ia tidak diperlukan dengan ketat.

Menggunakan TypeScript bermanfaat untuk pencegahan ralat, tetapi untuk kesederhanaan, struktur modul JavaScript ES adalah:

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 || !this.content) return;

    this.setupA11y();
    this.trigger?.addEventListener('click', this);
  }

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

  handleEvent(e) {
    // 1. Toggle visibility of content.
    // 2. Toggle ARIA expanded state on button.
  }

  connectedCallback() {
    document.addEventListener('keyup', (e) => {
      // Handle ESC key.
    });

    document.addEventListener('click', (e) => {
      // Handle clicking outside.
    });
  }

  disconnectedCallback() {
    // Remove event listeners.
  }
}

pendengar acara dikendalikan dalam constructor() dan connectedCallback() (seperti yang dijelaskan oleh Hawk Ticehurst). Walaupun tidak penting untuk fungsi asas, JavaScript meningkatkan UX dan kebolehcapaian (menambah aria-expanded dan aria-controls). Ini mempamerkan peningkatan progresif. Tiada CSS tambahan diperlukan; Styling diwarisi.

Contoh 2: <webui-tabs></webui-tabs>

Contoh ini menyoroti enhancement CSS dan peningkatan progresif dalam komponen tab.

Struktur HTML:

<webui-tabs>
  <div data-tablist="">
    <a data-tab="" href="https://www.php.cn/link/7426f79c9a7f5af0a6cc457b2a7fb195">Tab 1</a>
    <a data-tab="" href="https://www.php.cn/link/60430f4a984aa0a534e027339a7580a7">Tab 2</a>
    <a data-tab="" href="https://www.php.cn/link/9d4f684ba088d28ad1c2ae7d0aee496a">Tab 3</a>
  </div>

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

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

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

CSS dikemas:

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 */
  }
}

Gaya lalai ([data-tablist], [data-tab]) digunakan tanpa mengira JavaScript. Gaya dengan atribut role hanya ditambah apabila JavaScript diaktifkan, memberikan peningkatan progresif. Gaya adalah scoped to <webui-tabs></webui-tabs>, mencegah konflik. Pemilih keturunan mudah boleh menggantikan metodologi kompleks seperti bem.

Stylesheets boleh diimport melalui JavaScript (hanya dimakan jika JavaScript tersedia):

import styles from './styles.css';

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

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

Sebagai alternatif, gaya inline boleh disuntik menggunakan Shadow Dom:

class WebUITabs extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
       <!-- styles go here -->
    `;
  }
}

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

"cahaya" dom (kandungan antara tag komponen) mewarisi gaya global. The Shadow Dom memerlukan gaya dalaman. Artikel Dave Rupert menjelaskan bagaimana gaya luaran berinteraksi dengan bayangan dom.

Peningkatan Progresif dicapai dengan JavaScript:

class WebUITabs extends HTMLElement {
  constructor() {
    super();
    // ... (querySelector, etc.) ...
    this.createTabs();
    this.tabTriggers.forEach((tabTrigger, index) => {
      tabTrigger.addEventListener('click', (e) => { this.bindClickEvent(e); });
      tabTrigger.addEventListener('keydown', (e) => { this.bindKeyboardEvent(e, index); });
    });
  }

  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 menambah peranan ARIA dan navigasi papan kekunci, meningkatkan aksesibiliti. Tanpa JavaScript, tingkah laku lalai (pautan ke panel) masih boleh diakses.

Contoh 3: <webui-ajax-loader></webui-ajax-loader>

Contoh ini, yang dihasilkan sepenuhnya oleh JavaScript menggunakan Shadow Dom, hanya diberikan apabila JavaScript diaktifkan. Ia digunakan untuk menunjukkan keadaan pemuatan untuk permintaan Ajax.

HTML hanya:

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

JavaScript:

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

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

atribut part membolehkan gaya SVG dari luar komponen menggunakan ::part pseudo-selector:

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

sifat tersuai CSS boleh digunakan:

<webui-disclosure data-bind-click-outside="" data-bind-escape-key="">
  Show / Hide
  <div data-content="">
    <p>Content to be shown/hidden.</p>
  </div>
</webui-disclosure>

Peningkatan progresif adalah wujud; Loader hanya muncul apabila JavaScript disokong.

Kesimpulan

Komponen web HTML mengutamakan HTML, menggunakan JavaScript hanya apabila diperlukan untuk ciri dan enkapsulasi yang dipertingkatkan. Mereka memberikan pendekatan yang kuat untuk membina aplikasi web yang mantap, boleh dipelihara, dan boleh diakses.