Kaveat Yang Mungkin Anda Hadapi Semasa Bekerja Dengan Komponen Web

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyModule {}

Ini kerana penghalaan dikendalikan oleh penyemak imbas bukan rangka kerja anda. Rangka kerja perlu campur tangan peristiwa ini dan mengendalikan penghalaan pada peringkat rangka kerja. Walau bagaimanapun, disebabkan peristiwa disasarkan semula dalam ruang bayangan, ini menjadikan rangka kerja lebih mencabar untuk berbuat demikian kerana ia tidak mempunyai akses mudah kepada elemen penambat.

@Component({
  selector: 'some-web-component-wrapper',
  template: '<some-web-component [someProperty]="someClassProperty"></some-web-component>
})
export class SomeWebComponentWrapper {
  @Input() someClassProperty: string;
}

@NgModule({
    declarations: [SomeWebComponentWrapper],
    exports: [SomeWebComponentWrapper],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class WrapperModule {}

Dari segi penggunaan, anda boleh menyediakan pendengar acara global untuk mendengar acara ini dan mengendalikan penghalaan dengan memanggil fungsi penghalaan khusus rangka kerja.

7. Dom bayang bersarang

Apabila membina komponen web. Anda boleh membuat keputusan untuk meletakkan komponen web lain atau menyarangkannya di dalam komponen web lain. Ini contohnya.

ikon berlubang

import React from 'react';
import { createComponent } from '@lit/react';
import { MyElement } from './my-element.js';

export const MyElementComponent = createComponent({
  tagName: 'my-element',
  elementClass: MyElement,
  react: React,
  events: {
    onactivate: 'activate',
    onchange: 'change',
  },
});

ikon bersarang

<MyElementComponent
  active={isActive}
  onactivate={(e) => setIsActive(e.active)}
  onchange={handleChange}
/>

Jika anda memutuskan untuk menyarangkan komponen ini boleh menyukarkan lagi untuk menanyakan komponen bersarang. Terutamanya jika anda mempunyai pasukan QA yang perlu membuat ujian hujung ke hujung, kerana mereka perlu menyasarkan elemen tertentu pada halaman.
Contohnya untuk mengakses beberapa ikon, kita perlu mengakses beberapa sepanduk terlebih dahulu dengan mengambil shadowRoot itu kemudian buat pertanyaan baharu di dalam akar bayang itu.

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry':
the name "foo-bar" has already been used with this registry

Ini mungkin kelihatan mudah tetapi ia menjadi semakin sukar apabila komponen anda bersarang lebih dalam. Juga jika komponen anda bersarang ini boleh menjadikan kerja dengan petua alat lebih sukar. Terutamanya jika anda perlu menyasarkan elemen bersarang dalam supaya anda boleh menunjukkan petua alat di bawahnya.

Apa yang saya dapati ialah menggunakan slot menjadikan komponen kami lebih kecil dan lebih fleksibel yang juga lebih boleh diselenggara. Jadi lebih suka slot, elakkan bersarang shadow dom.

8. Terhad ::Slotted Selector

Slot menyediakan cara untuk mengarang elemen UI, tetapi ia mempunyai had dalam komponen web.

Pemilih ::slotted hanya terpakai kepada anak langsung slot, mengehadkan kegunaannya dalam senario yang lebih kompleks.

Ini contohnya.

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  render() {
    return html`<p>Hello world!</p>`;
  }
}

export class SimpleGreeting extends LitElement {
  static tagName = 'simple-greeting';

  render() {
    return html`<p>Hello world!</p>`;
  }
}

[SimpleGreeting].forEach((component) => {
  const newTag = `app1-${component.tagName}`;
  if (!customElements.get(newTag)) {
    customElements.define(newTag, SimpleGreeting);
  }
});

10. Penggunaan Ciri Lebih Perlahan

Komponen web sering ketinggalan daripada rangka kerja popular seperti Vue, React, Svelte dan Solid dalam menggunakan ciri baharu dan amalan terbaik.
Ini mungkin disebabkan oleh fakta bahawa komponen web bergantung pada pelaksanaan dan piawaian penyemak imbas, yang boleh mengambil masa yang lebih lama untuk berkembang berbanding kitaran pembangunan pesat rangka kerja JavaScript moden.
Akibatnya, pembangun mungkin mendapati diri mereka menunggu keupayaan tertentu atau terpaksa melaksanakan penyelesaian yang tersedia dalam rangka kerja lain.

Beberapa contoh ini ialah Lit menggunakan CSS dalam JS sebagai pilihan lalai untuk penggayaan. Sudah lama diketahui bahawa CSS dalam rangka kerja JS mempunyai masalah prestasi
kerana mereka sering memperkenalkan overhed masa jalan tambahan. Jadi kami mula melihat CSS yang lebih baharu dalam rangka kerja JS yang bertukar kepada penyelesaian berasaskan masa jalan sifar.
CSS Lit dalam penyelesaian JS masih berasaskan masa jalan.

Contoh lain ialah dengan Isyarat. Pada masa ini tingkah laku lalai dalam Lit ialah kami menambah kereaktifan pada sifat kelas dengan menambahkan penghias @property.
Walau bagaimanapun, apabila sifat itu ditukar, ia akan mencetuskan keseluruhan komponen untuk dipaparkan semula. Dengan Isyarat hanya sebahagian daripada komponen yang bergantung pada isyarat akan dikemas kini.
Ini lebih cekap untuk bekerja dengan UI. Sangat cekap sehingga terdapat cadangan baharu (TC39) untuk menambahkannya pada JavaScript.
Kini Lit menyediakan pakej untuk menggunakan Isyarat tetapi ia bukan kereaktifan lalai apabila rangka kerja lain seperti Vue dan Solid telah melakukan ini selama bertahun-tahun.
Kami berkemungkinan besar tidak akan melihat Isyarat sebagai kereaktifan lalai untuk beberapa tahun lagi sehingga isyarat adalah selain daripada piawaian web.

Satu lagi contoh yang berkaitan dengan kaveat saya sebelum ini "9. Elemen berslot sentiasa berada dalam dom". Rich Harris, pencipta Svelte bercakap tentang perkara ini
dalam catatan blognya 5 tahun lalu bertajuk "Mengapa saya tidak menggunakan Komponen Web".
Dia bercakap tentang cara mereka menggunakan pendekatan piawaian web untuk cara kandungan berslot ditayangkan dengan penuh semangat dalam Svelte v2. Namun, mereka terpaksa menjauhinya
dalam Svelte 3 kerana ia merupakan titik kekecewaan yang besar bagi pembangun. Mereka menyedari bahawa kebanyakan masa anda mahu kandungan berslot dipaparkan dengan malas.

Saya boleh menghasilkan lebih banyak contoh seperti dalam komponen web tidak ada cara mudah untuk menghantar data ke slot apabila rangka kerja lain seperti Vuejs sudah mempunyai sokongan untuk ini. Tetapi perkara utama di sini ialah
komponen web kerana ia bergantung pada piawaian web menggunakan ciri yang jauh lebih perlahan daripada rangka kerja yang tidak bergantung pada piawaian web.
Dengan tidak bergantung pada piawaian web, kami boleh berinovasi dan menghasilkan penyelesaian yang lebih baik.

Kesimpulan

Komponen Web menawarkan cara yang hebat untuk mencipta elemen tersuai yang boleh diguna semula dan dikapsulkan. Walau bagaimanapun, seperti yang telah kami terokai, terdapat beberapa kaveat dan cabaran yang mungkin dihadapi oleh pembangun apabila bekerja dengan mereka. Seperti ketidakserasian rangka kerja, penggunaan dalam bahagian hadapan mikro, pengehadan Shadow DOM, isu dengan penyasaran semula acara, slot dan penggunaan ciri yang perlahan adalah semua bidang yang memerlukan pertimbangan yang teliti.

Walaupun menghadapi cabaran ini, faedah Komponen Web, seperti enkapsulasi sebenar, mudah alih dan kebebasan rangka kerja, menjadikannya alat yang berharga dalam pembangunan web moden. Memandangkan ekosistem terus berkembang, kita boleh mengharapkan untuk melihat penambahbaikan dan penyelesaian baharu yang menangani kaveat ini.

Bagi pembangun yang mempertimbangkan Komponen Web, adalah penting untuk menimbang kebaikan dan keburukan ini dan sentiasa mendapat maklumat tentang kemajuan terkini dalam bidang tersebut. Dengan pendekatan dan pemahaman yang betul, Komponen Web boleh menjadi tambahan yang hebat pada kit alat pembangunan anda.

Atas ialah kandungan terperinci Kaveat Yang Mungkin Anda Hadapi Semasa Bekerja Dengan Komponen Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!