Wawancara Frontend: Bagaimana cara menggunakan CSS @scope untuk batasan komponen?

1. Pertanyaan dan konteks

Halaman admin yang dirender di server memiliki beberapa komponen yang menggunakan kelas umum .title dan .button. Kartu pemasaran baru mengubah spasi tombol dan warna heading pada halaman lama. Rancang migrasi bertahap dengan @scope sambil mempertahankan first paint yang dirender di server, variabel tema, dan dukungan peramban lama. Komponen tetap berada dalam satu DOM dokumen dan tidak menggunakan Shadow DOM.

2. Hal yang dinilai oleh pewawancara

• Pemahaman bahwa @scope membatasi pencocokan selektor tetapi tidak menciptakan isolasi Shadow DOM.
• Menjelaskan scoping root, batas scope opsional, scope bersarang, dan urutan cascade daripada menghafal sintaksis.
• Memisahkan state komponen, variabel tema, reset global, dan gaya pihak ketiga.
• Merancang deteksi kapabilitas, perilaku fallback, regresi visual, dan metrik migrasi.

3. Pertanyaan untuk diklarifikasi terlebih dahulu

1. Peramban mana saja yang harus didukung, dan apakah peramban yang tidak didukung harus identik secara piksel atau menggunakan jalur CSS lama?
2. Apakah komponen berbagi DOM dan mewarisi variabel tema, atau apakah mereka memerlukan isolasi DOM dan event yang sebenarnya?
3. Apakah gaya dimuat per halaman, komponen, atau paket pihak ketiga, dan berapa lama aturan lama dan baru akan berdampingan?
4. Haruskah sebuah scope mencakup semua turunan dari root, atau berhenti di subtree bersarang?

4. Jawaban 30 detik

Saya akan memperlakukan @scope sebagai kontrol rentang selektor, bukan Shadow DOM. Berikan setiap komponen kelas root yang stabil dan pertahankan aturannya di dalam scope tersebut; gunakan to saat pencocokan harus berhenti di batas bersarang. Simpan variabel tema pada root halaman atau komponen yang eksplisit dan ekspresikan state dengan kelas atau atribut lokal. Peramban yang didukung menggunakan aturan ber-scope; peramban yang tidak didukung menggunakan build bernamespace dari aturan semantik yang sama. Migrasikan satu komponen pada satu waktu dengan layer cascade, regresi visual, dan metrik hit aturan sehingga selektor lama dan baru tidak saling bertabrakan secara diam-diam.

5. Jawaban langkah demi langkah

Langkah 1: Pisahkan tujuan isolasi

Tentukan apakah masalahnya adalah tabrakan selektor, polusi pewarisan, atau batasan keamanan DOM/event. @scope mengatasi jangkauan selektor sambil tetap memungkinkan pewarisan variabel dan akses skrip ke node dokumen yang sama. Pilih Shadow DOM ketika DOM, gaya, dan event harus diisolasi; pilih CSS Modules ketika nama kelas modular waktu build adalah tujuan utamanya.

Langkah 2: Tentukan scope root dan limit

Gunakan root komponen sebagai scope root dan jaga agar selektor internal tetap mudah dibaca:

@scope (.profile-card) {
  .title { color: var(--card-title); }
  .button { padding-inline: 0.75rem; }
}

Untuk mengecualikan editor pihak ketiga yang bersarang di dalam .profile-card, gunakan @scope (.profile-card) to (.editor) { ... }. Batasan ini hanya menentukan di mana pencocokan berhenti; ini tidak mengkloning node atau memblokir pewarisan custom property. Dokumentasikan root dan limit untuk scope bersarang agar satu elemen tidak secara tidak sengaja dimiliki oleh beberapa komponen.

Langkah 3: Tangani cascade, state, dan tema

Scoping tidak menggantikan cascade. Tempatkan reset, default komponen, dan penimpaan dalam @layer yang eksplisit; gunakan :where() ketika sebuah aturan harus tetap mudah ditimpa daripada meningkatkan spesifisitas selektor. Ekspresikan state pada root komponen dengan [data-state] atau kelas lokal dan tetapkan aturan tersebut ke layer yang ditentukan. Variabel tema dapat berasal dari root halaman atau ditimpa di root komponen, tetapi variabel internal tidak boleh secara tidak sengaja menjadi kontrak global.

Langkah 4: Rancang kompatibilitas dan migrasi

Gunakan @supports selector(:scope) atau matriks target peramban untuk memilih jalur, lalu verifikasi peramban target sebenarnya. Build legacy dapat memperluas aturan yang sama ke dalam selektor bernamespace seperti .profile-card .title; kedua jalur harus berasal dari satu set aturan sumber. Migrasikan komponen demi komponen, bandingkan tangkapan layar saat aturan lama dan baru berdampingan, dan hapus selektor global lama hanya setelah jalur baru dapat diamati. Jangan membungkus seluruh aplikasi dalam satu scope raksasa.

Langkah 5: Verifikasi batas dan rollback

Uji kelas dengan nama yang sama pada komponen bersarang, scope root itu sendiri, elemen di luar batas to, perubahan tema, kombinasi state, node yang dimasukkan secara dinamis, dan subtree pihak ketiga. Lacak cakupan aturan ber-scope, distribusi kapabilitas peramban, perbedaan visual, dan aturan yang tidak cocok dalam output build. Jika regresi meningkat, lakukan rollback pada komponen atau nonaktifkan jalur yang ditingkatkan; jangan menyembunyikan kesalahan batas dengan menambahkan lebih banyak spesifisitas.

6. Contoh jawaban

Pertama-tama saya akan memutuskan apakah kita memerlukan batasan selektor atau isolasi DOM penuh. Untuk DOM dokumen bersama, @scope (.profile-card) menjaga selektor internal tetap lokal dan to dapat menghentikan pencocokan pada editor bersarang; ini tidak mengisolasi event atau mencegah pewarisan custom property seperti Shadow DOM. Saya akan menempatkan reset, default, dan penimpaan state dalam layer cascade yang eksplisit serta mendefinisikan variabel tema hanya pada root halaman atau komponen. Peramban yang tidak didukung akan menggunakan build bernamespace dari aturan yang sama. Migrasi akan dilakukan komponen demi komponen dengan perbedaan tangkapan layar, distribusi kapabilitas, dan metrik aturan yang tidak cocok. Regresi batasan akan me-rollback komponen tersebut daripada meningkatkan spesifisitas selektor.

7. Kesalahan umum

• Memperlakukan @scope sebagai Shadow DOM: DOM, event, dan variabel tetap dibagi; pilih primitif yang sesuai dengan tujuan isolasi.
• Mengubah selektor tetapi mengabaikan layer: Aturan lama masih bisa menang di layer yang lebih tinggi; tentukan layer dan preseden state secara bersamaan.
• Membungkus seluruh aplikasi dalam satu scope: Batasan komponen mendapat sedikit manfaat dan rollback menjadi sulit; pisahkan berdasarkan root komponen.
• Membiarkan peramban lama mengabaikan aturan: Gaya kritis menghilang; kirimkan jalur legacy bernamespace dan uji matriks kapabilitas.
• Memperbaiki regresi dengan spesifisitas yang lebih tinggi: Kopling dan biaya penimpaan meningkat; bentuk ulang root, scope limit, dan cascade layer.

8. Pertanyaan lanjutan dan tanggapan

Lanjutan 1: Bisakah @scope menghentikan komponen anak mewarisi variabel tema?

Tidak. Ini terutama membatasi pencocokan selektor; custom property tetap mengikuti pewarisan CSS. Timpa variabel pada root anak atau gunakan Shadow DOM ketika lingkungan variabel yang terpisah diperlukan.

Lanjutan 2: Apa yang menang ketika scope bersarang cocok dengan elemen yang sama?

Cascade normal dan pengurutan terkait scope tetap berlaku; "scope bagian dalam selalu menang" bukanlah aturan yang aman. Tempatkan scope dalam layer yang ditentukan dan periksa reproduksi minimal di DevTools peramban.

Lanjutan 3: Bagaimana peramban yang tidak didukung tetap konsisten?

Hasilkan selektor bernamespace atau kelas CSS-Module yang stabil dari aturan sumber yang sama, menjaga semantik variabel, state, dan layer. Deteksi runtime memilih jalur implementasi; komponen bisnis tidak boleh mempertahankan dua state machine.