Membuat komponen web untuk konteks yang berbeza

Artikel ini bukan tentang cara membina komponen web, Caleb Williams baru -baru ini menulis panduan terperinci. Mari kita bincangkan cara menggunakannya, faktor apa yang perlu dipertimbangkan ketika membina, dan bagaimana untuk memanfaatkannya dengan berkesan dalam projek anda.

Sekiranya anda baru dalam komponen web, panduan Caleb adalah baik dibaca, tetapi berikut adalah beberapa sumber yang dapat membantu anda memulakan dengan cepat:

• Komponen Web - Pendekatan "Betul"
• Shadow Dom v1: Komponen Web Sendiri
• Komponen Web di MDN
• Komponen Web Awesome
• Komponen web terbuka yang disyorkan

Dengan komponen web kini disokong secara meluas (terima kasih kepada kerja keras banyak di belakang tabir) dan memandangkan kelebihan itu akan segera beralih ke platform kromium-orang sekarang melihat komponen web sebagai "asli" dan cara yang bersesuaian untuk membina komponen UI yang boleh diguna semula untuk mengekalkan konsistensi antara sistem reka bentuk dan projek web sambil memanfaatkan kuasa shadow.

Ini adalah betul dan salah. Tetapi pertama, mari kita lihat segitiga lapisan abstrak .

Segitiga lapisan abstrak

Secara teknikal, kita harus mempertimbangkan komponen web sebagai lanjutan dari bahasa markup kegemaran kami HTML (ya!). API Komponen Web membolehkan kami membuat elemen HTML tersuai yang tidak wujud di HTML (contohnya<foo-bar></foo-bar> ).

Ada yang mengatakan bahawa komponen web pada dasarnya adalah unsur -unsur HTML yang baru, jadi kita harus menganggapnya sebagai sebahagian daripada spesifikasi HTML, jadi kita harus mengikuti paradigma, konsep teras, dan penggunaannya. Jika kita menganggap semua perkara ini, kita akan mendapati bahawa komponen kita akan wujud di peringkat terendah timbunan platform web, bersebelahan dengan HTML, CSS, dan JavaScript. Rangka kerja dan perpustakaan (seperti React, Vue, Angular, Sveltejs) bekerja pada lapisan abstraksi mereka dan duduk di atas alat lain yang berada dalam beberapa jenis "tengah-bumi" seperti stensilj, hibrid, dan lit. Di bawah lapisan abstraksi ini, kita dapat mencari teknologi web asas kami ... dan komponen web asli. Kita boleh menggunakan gambarajah alt ( abstraksi la ayer t ) untuk mewakili konsep ini:

Mengapa ini penting? Ia membantu kita memvisualisasikan lapisan yang wujud di atas komponen asli dan memahami persekitaran penggunaannya supaya mereka dapat dibina terhadap persekitaran yang dimaksudkan. Apakah persekitarannya? Itulah matlamat kami.

Teknologi yang sama, persekitaran yang berbeza

Shadow Dom adalah faktor utama dalam API Komponen Web. Ia membolehkan kita membungkus JavaScript dan CSS ke dalam elemen tersuai untuk mengelakkan gangguan luaran dan operasi gaya melainkan kita secara eksplisit membenarkannya. Pemaju sememangnya boleh mengikuti beberapa cara untuk membolehkan CSS luaran bocor ke dalam akar dan komponen bayang-bayang, termasuk sifat tersuai serta :: bahagian dan :: tema pseudo-elemen, yang Monica Dinculescu mempunyai pengenalan yang baik.

Satu lagi perkara yang perlu dipertimbangkan: persekitaran yang kita gunakan. Tiga tahun selepas saya membina komponen web saya, saya dapat mengenal pasti dua persekitaran: persekitaran persendirian (seperti sistem reka bentuk) dan persekitaran standard (seperti HTML, CSS, dan JavaScript tanpa gaya tersuai).

Sebelum merancang komponen, kita perlu memahami bagaimana ia akan digunakan, jadi menentukan jenis persekitaran adalah kunci kepada semua ini. Cara paling mudah adalah untuk menargetkan hanya satu persekitaran, tetapi dengan helah CSS kecil, kita boleh membina komponen untuk kedua -duanya .

Sebelum kita menggali lebih mendalam, mari kita lihat perbezaan antara kedua -dua persekitaran.

Persekitaran persendirian

Persekitaran swasta adalah ekosistem tertutup yang menyediakan komponen dengan gaya mereka sendiri dan mesti digunakan seperti itu. Oleh itu, jika kita membina perpustakaan komponen dari panduan gaya atau sistem reka bentuk tertentu, setiap komponen akan mencerminkan gaya tersuai, jadi tidak perlu mengekodkannya setiap kali anda memerlukannya.

Begitu juga dengan logik JavaScript. Sebagai contoh, kita boleh melampirkan akar bayangan tertutup untuk mengelakkan orang lain dari tidak sengaja menusuk sempadan bayangan dengan QuerySelector. Oleh itu, kita hanya boleh memilih dan menggunakan mana -mana komponen untuk mengelakkan masalah seperti ketidakkonsistenan dalam gaya dan konflik CSS. Sebagai pengarang, anda juga boleh menentukan satu set ciri khas CSS (atau :: bahagian) yang boleh digunakan untuk komponen gaya untuk kes penggunaan tertentu, tetapi ini bukan tumpuan merancang sistem.

Ini adalah contoh menggunakan komponen web dalam persekitaran persendirian. Semua gaya dan logiknya terkandung dalam bayang-bayang-bayang-bayangnya dan hanya boleh ditambah ke mana-mana halaman.

Contoh -contoh ini dan seterusnya adalah untuk tujuan demonstrasi sahaja dan tidak dimaksudkan untuk persekitaran pengeluaran, kerana mereka tidak mengambil situasi kritikal seperti kebolehaksesan dan pengoptimuman lain.

Komponen dalam persekitaran swasta jarang digunakan di luar persekitaran itu. Sebagai contoh, jika kita cuba mendapatkan elemen dari sistem reka bentuk (dengan gaya terpaksa sendiri), kita tidak boleh menambahnya kepada projek dan mengharapkan untuk menyesuaikannya. Adakah anda tahu bagaimana Bootstrap boleh menyediakan dan menyesuaikan tema mengikut keutamaan anda? Inilah yang bertentangan. Komponen ini bertujuan untuk berjalan di persekitaran mereka dan hanya dalam persekitaran mereka.

Persekitaran standard

Persekitaran standard mungkin jenis komponen yang paling kompleks, bukan sahaja kerana persekitaran boleh berkisar dari kerangka matang seperti VUE dan bertindak balas kepada HTML asli biasa, tetapi kerana semua orang harus dapat menggunakan komponen itu seolah -olah ia adalah unsur lain.

Sebagai contoh, apabila komponen ditambah secara terbuka (seperti menambah NPM), mereka yang menggunakannya akan mengharapkan dapat menyesuaikannya, sekurang -kurangnya sedikit sebanyak.

Adakah anda tahu mana -mana elemen HTML dengan gaya demo mereka sendiri? Jawapannya hendaklah "tidak", kerana unsur -unsur mesti digayakan secara eksplisit menggunakan CSS. Begitu juga dengan komponen web yang dibuat dalam persekitaran standard. Komponen web tunggal harus disesuaikan dengan menambahkan kelas dan sifat atau kaedah lain.

Ini sama seperti yang kita lihat dalam contoh persekitaran tertutup<todo-list></todo-list> elemen, tetapi ia direka untuk persekitaran standard. Ia berfungsi seperti itu, tanpa gaya demo dalam akar bayangannya. Malah, ia hanya mengandungi logik yang diperlukan dan CSS asas untuk memastikan fungsinya. Jika tidak, ia boleh disesuaikan seperti mana -mana elemen HTML standard (seperti div).

Kedua -dua contoh yang kita lihat untuk setiap persekitaran dibuat menggunakan komponen yang sama. Perbezaannya ialah komponen dalam persekitaran standard boleh disesuaikan dan dipilih menggunakan CSS luaran.

Komponen dan komposisi web

OK, jadi menggunakan komponen web sebenarnya sama seperti menggunakan HTML biasa, walaupun seperti yang dapat kita lihat, sangat penting untuk mengikuti paradigma dan prinsip kandungan yang diberikan. Apa yang perlu kita perhatikan ialah gabungan komponen web.

Seperti yang dijelaskan oleh Fundamental Web Google:

Kombinasi adalah salah satu ciri yang paling tidak diketahui Shadow Dom, tetapi mereka boleh dikatakan yang paling penting.

Di dunia pembangunan web kami, komposisi adalah bagaimana kami membina aplikasi secara mendadak menggunakan HTML. Blok bangunan yang berbeza (<div> ,<code><s></s> ,<em></em> ,<strong></strong> ) disusun untuk membentuk permohonan. Sesetengah tag ini juga boleh digunakan dengan satu sama lain. Gabungan adalah mengapa<select></select> ,<details></details> ,<summary></summary> dan<video></video> Sebab mengapa unsur -unsur asli sedemikian sangat fleksibel. Setiap tag menerima HTML tertentu sebagai elemen kanak -kanak dan melakukan beberapa operasi khas pada mereka. Contohnya,<select></select> Tahu bagaimana untuk<option></option> dan<optgroup></optgroup> Diberikan sebagai senarai drop-down dan widget pelbagai pilihan.<details></details> Elemen akan<summary></summary> Dibentangkan sebagai anak panah yang diperkembangkan. walaupun<video></video> Juga tahu bagaimana menangani unsur -unsur kanak -kanak tertentu:<track></track> Unsur -unsur tidak diberikan, tetapi mereka mempengaruhi tingkah laku video. Betapa hebatnya! Komposisi adalah apa yang biasanya kita lakukan apabila menggunakan HTML. Oleh kerana komponen web hanyalah elemen HTML dengan rujukan DOM (bukan bekas logik), kita harus bergantung pada kombinasi untuk membina komponen kami dan mana -mana subkomponen. Sekiranya anda mempertimbangkan

dan<select></select> , anda akan melihat bahawa anda menggabungkan unsur -unsur ini untuk mendapatkan output akhir, dan anda mempunyai sifat khusus yang boleh digunakan untuk komponen utama (mis. [readonly] ) atau komponen kanak -kanak (mis. [selected] ). Begitu juga dengan komponen web, jika anda membina senarai tersuai, pertimbangkan untuk membina komponen utama (<custom-list></custom-list> ) dan subkomponen (<custom-li></custom-li> ). gunakan<slot></slot> Unsur -unsur, anda boleh menentukan di mana unsur -unsur kanak -kanak akan diletakkan, dan kandungan pemegang tempat yang akan dipaparkan apabila elemen kanak -kanak tidak diluluskan.

Komponen web dan kebolehcapaian

Satu lagi perkara yang perlu dipertimbangkan ialah apa yang kita panggil tema "kecil" aksesibiliti . Oleh kerana kita mencipta elemen HTML yang baru, kita perlu mempertimbangkan kebolehcapaian elemen untuk menyediakan peranan semantik asas, mana -mana navigasi papan kekunci, dan keutamaan sistem operasi pengguna seperti gerakan yang dikurangkan dan tetapan kontras yang tinggi.

Saya sangat mengesyorkan sumber -sumber berikut sebagai rujukan untuk membina komponen yang boleh diakses dan inklusif, bagaimana untuk menentukan tag semantik, dan bagaimana untuk melaksanakan navigasi papan kekunci asas.

• Komponen inklusif
• "Kesan untuk semua orang" di web.dev
• Amalan Kreatif Wai-Aria
• Senarai Semak WEBAim WCAG

kesimpulannya

Komponen Web adalah teknologi yang baru muncul dalam pembangunan web, jadi tidak ada amalan terbaik yang jelas untuk membimbing kita ketika membina mereka berdasarkan penggunaan yang dimaksudkan atau memaksimumkan penggunaannya. Apabila anda mendapati diri anda menggunakannya, satu -satunya perkara yang anda dapat dari jawatan ini adalah untuk mempertimbangkan sama ada mereka untuk persekitaran tertutup atau standard dan tanya diri anda :

• W ho akan menggunakan komponen ini?
• Adakah banyak fleksibiliti orang ini harus menyesuaikannya?
• Adakah komponen ini sesuai untuk semua orang atau untuk khalayak tertentu?