Membina komponen web dengan elemen tersuai HTML
Elemen tersuai adalah bahagian teras komponen web, yang membolehkan pemaju membuat komponen UI yang boleh diguna semula secara asli melalui HTML, CSS, dan JavaScript. 1. Untuk membuat elemen tersuai, anda perlu mewarisi htmlelement dan mendaftar dengan customElements.define (); 2. Gunakan Shadow Dom untuk melaksanakan pengasingan gaya dan struktur enkapsulasi; 3. Menanggapi perubahan keadaan komponen melalui cangkuk kitaran hayat seperti ConnectedCallback, AttributeChangedCallback, dan sebagainya; 4. Anda boleh mencapai penghantaran data dan mengemas kini melalui atribut mendengar atau penetus tersuai; 5. Gunakan mekanisme slot <slot> untuk menyokong penyisipan kandungan. Seluruh proses tidak memerlukan apa -apa rangka kerja untuk bergantung, yang sesuai untuk meningkatkan keupayaan pembangunan komponen dan mengurangkan kebergantungan pada rangka kerja.
Membina komponen web dengan elemen tersuai HTML sebenarnya adalah untuk melaksanakan komponen UI yang boleh diguna semula dan digerakkan dengan baik tanpa bergantung pada rangka kerja. Perkara ini terdengar sedikit "maju", tetapi tidak sukar untuk dilakukan, terutama yang sesuai untuk mereka yang ingin meningkatkan keupayaan pembangunan komponen atau ingin mengurangkan pergantungan mereka terhadap kerangka.
Apakah elemen tersuai?
Unsur-unsur tersuai adalah sebahagian daripada standard komponen web dan membolehkan kami membuat tag elemen HTML baru, seperti <my-button></my-button> atau <data-card></data-card> . Sokongan asli pelayar, tiada perpustakaan tambahan diperlukan.
Untuk mendaftarkan elemen tersuai, amalan asas adalah menggunakan kaedah customElements.define() dan mewarisi kelas HTMLElement :
MyButton kelas memanjangkan htmlelement {
pembina () {
super ();
this.attachshadow ({mod: 'buka'});
this.shadowroot.innerHtml = `<utton> klik saya </butang>`;
}
}
customElements.define ('my-button', myButton); Dengan cara ini anda boleh menggunakan <my-button></my-button> secara langsung di HTML. Ringkasnya, ia adalah untuk menulis kelas sendiri dan memberitahu penyemak imbas: "Saya akan menentukan tag ini."
Bagaimana cara menambah gaya dan tingkah laku?
Salah satu kelebihan utama komponen web ialah pengasingan gaya, yang dicapai melalui Shadow Dom. Anda boleh menulis struktur dan gaya seperti anda akan menulis HTML biasa, tetapi ia tidak akan menjejaskan bahagian lain halaman.
Sebagai contoh, dalam kelas MyButton di atas, anda boleh menambah gaya seperti ini:
this.shadowroot.innerHtml = `
<yaya>
butang {
Latar Belakang: #007BFF;
Warna: Putih;
Padding: 10px 20px;
Radius sempadan: 4px;
Sempadan: Tiada;
kursor: penunjuk;
}
</gaya>
<utton> </slot> </butang>
`;- Gunakan tag
<style>untuk menulis gaya ke dalam Shadowroot. -
<slot>membolehkan anda memasukkan kandungan, seperti<my-button>提交</my-button>.
Jika anda memerlukan mengikat acara, anda boleh mengendalikannya di cangkuk pembina atau kitaran hayat:
this.shadowroot.QuerySelector ('Button'). AddEventListener ('klik', () => {
Console.log ('Butang telah diklik');
});Bagaimana menggunakan cangkuk kitaran hidup?
Elemen tersuai menyediakan beberapa kaedah panggilan balik kitaran hayat, serupa dengan useeffect react atau Vue yang dipasang:
-
connectedCallback: dicetuskan apabila elemen dimasukkan ke dalam halaman -
disconnectedCallback: Dipecat apabila elemen dikeluarkan -
attributeChangedCallback(attrName, oldVal, newVal): dicetuskan apabila atribut berubah -
observedAttributes: Mengisytiharkan atribut mana yang akan mencetuskan AttributeChangedCallback
Contohnya, anda mahu mendengar harta yang dipanggil disabled :
statik dapat diperhatikanStribute () {
kembali ['dilumpuhkan'];
}
AttributeChangedCallback (nama, OldValue, NewValue) {
jika (nama === 'dilumpuhkan') {
Const Button = this.shadowroot.QuerySelector ('Button');
butang.disabled = newValue! == null;
}
} Dengan cara ini, apabila pengguna menetapkan <my-button disabled>按钮</my-button> , butang dalaman juga akan dilumpuhkan.
Bagaimana cara memindahkan data?
Sebagai tambahan kepada atribut, anda juga boleh lulus data melalui refleksi atribut atau setter adat. Sebagai contoh, tambahkan atribut label ke komponen:
Tetapkan label (nilai) {
this._label = nilai;
this.shadowroot.QuerySelector ('Button'). TextContent = value;
}
Dapatkan label () {
kembali this._label;
}Apabila menggunakannya, anda boleh melakukan ini:
<my-button id = "btn"> Teks lalai </my-button> <script> document.getElementById ('btn'). label = 'teks butang baru'; </script>
Kaedah ini lebih fleksibel daripada atribut semata -mata dan lebih sesuai untuk jenis data yang kompleks.
Pada dasarnya itu sahaja. Unsur -unsur tersuai tidak rumit, tetapi mereka mudah mengabaikan butiran, seperti masa panggilan kitaran hayat, pengurusan bayang -bayang, dan bagaimana untuk berkomunikasi dengan komunikasi luaran. Menguasai ini dan anda boleh menulis komponen yang benar-benar bebas dan mudah untuk dijaga.
Atas ialah kandungan terperinci Membina komponen web dengan elemen tersuai HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Melaksanakan pemuatan malas asli untuk imej dalam html
Jul 12, 2025 am 12:48 AM
Pemuatan malas asli adalah fungsi penyemak imbas terbina dalam yang membolehkan pemuatan gambar malas dengan menambah atribut pemuatan = "malas" ke tag. 1. Ia tidak memerlukan JavaScript atau perpustakaan pihak ketiga, dan digunakan secara langsung dalam HTML; 2. Ia sesuai untuk gambar yang tidak dipaparkan pada skrin pertama di bawah halaman, galeri gambar menatal tambahan dan sumber gambar yang besar; 3. Ia tidak sesuai untuk gambar dengan skrin pertama atau paparan: Tiada; 4. Apabila menggunakannya, pemegang tempat yang sesuai harus ditetapkan untuk mengelakkan susun atur susun atur; 5. Ia harus mengoptimumkan pemuatan imej responsif dalam kombinasi dengan atribut srcset dan saiz; 6. Isu keserasian perlu dipertimbangkan. Sesetengah pelayar lama tidak menyokongnya. Mereka boleh digunakan melalui pengesanan ciri dan digabungkan dengan penyelesaian JavaScript.
Melaksanakan imej responsif dengan atribut HTML SRCSET dan Saiz
Jul 12, 2025 am 12:15 AM
SRCSET dan saiz adalah sifat utama untuk pelaksanaan imej responsif HTML. SRCSET menyediakan pelbagai sumber imej dan kepadatan lebar atau piksel mereka, seperti 400W dan 800W, dan penyemak imbas memilih imej yang sesuai dengan sewajarnya; Saiz mentakrifkan lebar paparan imej di bawah lebar skrin yang berbeza, seperti (maksimum lebar: 600px) 100VW, 50VW, supaya penyemak imbas dapat lebih tepat sesuai dengan saiz imej. Dalam penggunaan sebenar, anda perlu menyediakan gambar pelbagai saiz, dengan jelas dinamakan, susun atur reka bentuk mengikut pertanyaan media, dan menguji prestasi peralatan untuk mengelakkan mengabaikan saiz atau kesilapan unit, dengan itu menjimatkan lebar jalur dan meningkatkan prestasi.
Apakah perbezaan dan kes penggunaan untuk teks HTML dan teks jenis input?
Jul 12, 2025 am 02:48 AM
Perbezaan utama ialah TextArea menyokong pelbagai baris input teks, manakala inputText hanya tersedia dalam satu baris. 1. Gunakan inputType = "teks" sesuai untuk input pengguna pendek dan satu baris, seperti nama pengguna, alamat e-mel, dan lain-lain, dan boleh menetapkan maxLength untuk mengehadkan bilangan aksara. Penyemak imbas menyediakan fungsi pengisian automatik, menjadikannya lebih mudah untuk gaya seragam di seluruh pelayar; 2. Gunakan Textarea untuk senario yang memerlukan pelbagai baris input, seperti kotak komen, borang maklum balas, pemecahan garis sokongan dan perenggan, dan boleh mengawal saiz melalui CSS atau melumpuhkan fungsi pelarasan. Kedua -dua ciri -ciri bentuk sokongan seperti ruang letak dan mengisi yang diperlukan, tetapi Textarea mentakrifkan saiz melalui baris dan col, dan input menggunakan atribut saiz.
`` vs `` di html
Jul 19, 2025 am 12:41 AM
Ia adalah elemen peringkat blok, digunakan untuk membahagikan kawasan kandungan blok besar; Ia adalah elemen sebaris, sesuai untuk membungkus segmen kecil teks atau serpihan kandungan. Perbezaan khusus adalah seperti berikut: 1. Secara eksklusif menduduki baris, lebar dan ketinggian, margin dalaman dan luaran boleh ditetapkan, yang sering digunakan dalam struktur susun atur seperti tajuk, sidebars, dan lain -lain; 2. Jangan bungkus garisan, hanya menduduki lebar kandungan, dan digunakan untuk kawalan gaya tempatan seperti perubahan warna, berani, dan lain -lain; 3. Dari segi senario penggunaan, ia sesuai untuk susun atur dan struktur struktur kawasan keseluruhan, dan digunakan untuk pelarasan gaya berskala kecil yang tidak menjejaskan susun atur keseluruhan; 4. Apabila bersarang, ia boleh mengandungi sebarang elemen, dan unsur-unsur peringkat blok tidak boleh bersarang di dalamnya.
Bagaimana untuk membuat pop timbul atau modal dengan HTML, CSS, dan JS?
Jul 12, 2025 am 02:42 AM
Untuk mencapai kesan pop-up asas, anda perlu mengikuti langkah-langkah berikut: 1. Struktur: Gunakan HTML untuk membuat butang pencetus, lapisan topeng dan kawasan kandungan pop timbul; 2. Gaya: Tetapkan susun atur yang tersembunyi, berpusat, latar belakang topeng dan gaya butang tutup melalui CSS; 3. Interaksi: Gunakan JavaScript untuk mengikat acara klik untuk mengawal paparan pop-up dan menyembunyikan, dan boleh mengembangkan fungsi penutupan ESC; 4. Pengoptimuman: Tambah animasi CSS untuk meningkatkan pengalaman pengguna. Seluruh proses tidak memerlukan perpustakaan pihak ketiga, yang sesuai untuk dengan cepat merealisasikan fungsi pop-up asas.
Apakah pekerja web dan bagaimana ia berkaitan dengan HTML?
Jul 12, 2025 am 03:03 AM
WebWorkers adalah benang bebas yang berjalan di latar belakang penyemak imbas, digunakan untuk melaksanakan tugas yang memakan masa tanpa menyekat antara muka pengguna. Mereka dilaksanakan melalui fail JavaScript dan dimulakan dengan skrip di halaman HTML, tetapi sekali berlari, mereka dipisahkan dari benang utama. 1. WebWorkers tidak boleh mengakses DOM secara langsung untuk memastikan kestabilan halaman; 2. Mereka menyedari komunikasi yang selamat dengan benang utama melalui postmessage () dan onmessage; 3. Ia sesuai untuk memproses tugas-tugas intensif CPU seperti imej, pengkomputeran kompleks, analisis data; 4. Ia menyokong beberapa API seperti SetTimeout, Fetch dan IndexedDB; 5. Apabila menggunakannya, anda perlu memberi perhatian kepada kesukaran debug, penggunaan memori, sekatan silang domain dan isu-isu lain.
Tag html penting untuk pemula
Jul 27, 2025 am 03:45 AM
Untuk memulakan dengan HTML dengan cepat, anda hanya perlu menguasai beberapa tag asas untuk membina rangka web. 1. Struktur halaman adalah penting, dan, yang merupakan elemen akar, mengandungi maklumat meta, dan merupakan kawasan paparan kandungan. 2. Gunakan tajuk. Semakin tinggi tahap, semakin kecil nombor. Gunakan tag untuk segmen teks untuk mengelakkan melangkau tahap. 3. Pautan menggunakan tag dan sepadan dengan atribut HREF, dan imej menggunakan tag dan mengandungi atribut SRC dan ALT. 4. Senarai ini dibahagikan kepada senarai yang tidak teratur dan senarai yang diperintahkan. Setiap entri diwakili dan mesti bersarang dalam senarai. 5. Pemula tidak perlu memaksa menghafal semua tag. Lebih cekap untuk menulis dan memeriksa mereka semasa anda menulis. Menguasai struktur, teks, pautan, gambar dan senarai untuk membuat laman web asas.
Konsep Shadow Dom dan Integrasi HTML
Jul 24, 2025 am 01:39 AM
Shadowdom adalah teknologi yang digunakan dalam teknologi komponen web untuk membuat subtrees DOM terpencil. 1. Ia membolehkan gunung struktur DOM bebas pada elemen HTML biasa, dengan gaya dan tingkah laku sendiri, dan tidak menjejaskan dokumen utama; 2. Dibuat melalui JavaScript, seperti menggunakan kaedah lampiran dan menetapkan mod untuk dibuka; 3. Apabila digunakan dalam kombinasi dengan HTML, ia mempunyai tiga ciri utama: struktur yang jelas, pengasingan gaya dan unjuran kandungan (slot); 4. Nota termasuk debugging kompleks, kawalan skop gaya, overhead prestasi dan masalah keserasian rangka kerja. Singkatnya, Shadowdom menyediakan keupayaan enkapsulasi asli untuk membina komponen UI yang boleh diguna semula dan tidak mencemarkan.
