Styling In the Shadow Dom dengan bahagian bayangan CSS

Safari 13.1 memperkenalkan sokongan untuk bahagian bayangan CSS, yang bermaksud bahawa pemilih ::part() kini disokong oleh Chrome, Edge, Opera, Safari, dan Firefox. Artikel ini akan meneroka kegunaannya dan mengkaji semula ciri -ciri pembungkusan Shadow Dom.

Kelebihan Pembungkusan Dom Shadow

Di GiffGaff, kami mempunyai sejumlah besar kod CSS yang ditulis oleh orang yang berbeza dalam pelbagai cara. Mari kita lihat apa masalah yang boleh dibawa.

Menamakan konflik

Konflik nama kelas terdedah kepada CSS. Seorang pemaju boleh membuat nama kelas yang dipanggil .price . Seorang pemaju lain (dan mungkin juga orang yang sama) boleh menggunakan nama kelas yang sama tanpa mengetahui.

CSS tidak akan mendorong sebarang kesilapan. Sekarang mana -mana elemen HTML dengan kelas ini akan menerima gaya untuk dua perkara yang sama sekali berbeza.

Shadow Dom menyelesaikan masalah ini. Perpustakaan CSS-in-JS seperti emosi dan komponen gaya juga menyelesaikan masalah ini dengan cara yang berbeza dengan menghasilkan nama kelas rawak seperti .bwzfXH . Ini pasti membantu mengelakkan konflik! Walau bagaimanapun, CSS-in-JS tidak menghalang sesiapa daripada memecahkan komponen anda dengan cara lain. Contohnya ……

Gaya Asas dan Reset CSS

Pemilih elemen HTML boleh digunakan (mis.<button></button> dan<div> ) Sapukan gaya. Gaya ini boleh memecahkan komponen. Shadow Dom adalah satu-satunya mekanisme yang menyediakan (hampir) sepenuhnya terkandung-anda boleh yakin bahawa komponen anda akan kelihatan konsisten walaupun dalam asas kod <code>!important , kerana setiap komponen dikemas.

 /* Ini tidak akan menjejaskan butang di dalam bayangan dom*/
butang {latar belakang warna: kapur! Penting; }

Saya tidak fikir ia adalah amalan yang baik untuk gaya elemen dengan cara ini, tetapi ia berlaku. Walaupun ini berlaku, gaya ini tidak menjejaskan dom bayangan.

Perlu diingat bahawa gaya yang diwarisi seperti warna, fon, dan ketinggian garis masih diwarisi dalam Shadow Dom. Untuk mengelakkan ini, gunakan all: initial atau sebaik -baiknya all: revert selepas penyemak imbas menyokong lebih baik.

Mari kita lihat contoh biasa CSS yang digunakan secara langsung kepada elemen HTML. Pertimbangkan kod tetapan semula Eric Meyer:

 html, badan, div, span, applet, objek, iframe,
H1, H2, H3, H4, H5, H6, P, Blockquote, Pra,
abbr, akronim, alamat, besar, memetik, kod,
DEL, DFN, EM, IMG, INS, KBD, Q, S, SAMP,
mogok kecil kuat sub sup tt var
b, u, i, tengah,
DL, DT, DD, OL, UL, LI,
Fieldset, Borang, Label, Legenda,
Jadual, Kapsyen, Tbody, Tfoot, Thead, TR, TH, TD,
artikel, selain, kanvas, butiran, tertanam,
Rajah, figcaption, footer, header, hgroup,
menu, nav, output, ruby, seksyen, ringkasan,
masa, tanda, audio, video {
  Margin: 0;
  Padding: 0;
  Sempadan: 0;
  saiz font: 100%;
  Font: mewarisi;
  Vertical-Align: Baseline;
}

Apa yang berlaku jika komponen yang kami gunakan menggunakan margin lalai dan nilai padding untuk ejen pengguna? Reset ini boleh menyebabkan ia kelihatan rosak, kerana nilai lalai ini sebenarnya dibersihkan.

Shadow Dom adalah cara untuk mengelakkan masalah ini. Shadow Dom membolehkan kita yakin sepenuhnya bahawa komponen itu akan diberikan seperti yang dijangkakan, tidak kira asas kod yang berakhir. Sekali lagi, tiada kod yang digunakan hanya untuk komponen secara tidak sengaja akan menjejaskan apa -apa lagi -semua tanpa konvensyen penamaan kelas yang rumit. Shadow Dom menyediakan tahap enkapsulasi yang tidak dapat dicapai dengan cara lain.

Pembungkusannya hebat, tetapi kami juga mahu komponen kami bertemakan dan disesuaikan. Pemilih ::part menjadikannya lebih mudah.

Gaya bayangan dom dengan :: bahagian ()

Setakat ini, satu -satunya cara CSS dapat mengubahsuai gaya elemen tersuai dari luar Shadow Dom adalah dengan menggunakan sifat adat CSS. Dalam sistem reka bentuk yang ketat, anda hanya mahu membenarkan perubahan terhad, yang mungkin sesuai. Jika anda mahu komponen anda menjadi lebih umum, ia boleh menimbulkan masalah. Anda perlu menggunakan sifat tersuai untuk menentukan setiap atribut CSS yang ingin anda sediakan untuk gaya. Ia hanya terdengar sangat rumit.

Jika kita mahu komponen gaya dengan cara yang berbeza berdasarkan kelas pseudo (seperti :hover ), keadaan akan menjadi lebih rumit. Pada asasnya, kita berakhir dengan banyak sifat tersuai. Mari kita lihat contoh dari Ionic (satu set komponen web sumber terbuka). Lihatlah semua sifat tersuai yang ditakrifkan pada komponen butang ionik.

Jangan ragu untuk memeriksanya.

Saya mengira 23 sifat tersuai. Tidak perlu dikatakan, ini jauh dari ideal.

Berikut adalah contoh menggunakan ::part() kepada elemen gaya.

Dalam contoh ini, saya hanya menukar sifat warna, sempadan dan latar belakang warna, tetapi saya boleh menggunakan mana -mana harta yang saya mahu tanpa dibatasi oleh sifat tersuai yang telah ditakrifkan. Perhatikan bahawa saya juga boleh menggunakan kelas pseudo seperti :hover dan :focus untuk gaya keadaan yang berbeza dari komponen.

Dalam contoh butang ini, keseluruhan komponen terdedah untuk tetapan gaya, tetapi jika komponen web anda mengandungi pelbagai elemen HTML, anda boleh mendedahkan hanya bahagian terpilih komponen ke tetapan gaya ini - oleh itu nama ::part . Ini menghalang pengguna komponen daripada menggayakan mana -mana elemen sewenang -wenang di dalam pokok bayangan. Penulis komponen bertanggungjawab untuk mendedahkan komponen yang mereka ingin mendedahkan secara eksplisit. Bahagian lain komponen dapat mengekalkan konsistensi visual atau menggunakan sifat tersuai untuk mencapai kesesuaian yang kurang.

Jadi, bagaimana kita menetapkan ini untuk komponen kita? Mari kita lihat cara menggunakan ::part untuk membuat unsur -unsur tertentu gaya komponen web. Apa yang kita lakukan ialah menambah harta part kepada elemen yang kita mahu dedahkan.

<div part="box"> …</div>
<button>Klik saya</button>

Dalam contoh ini, div boleh disesuaikan dengan menggunakan skop CSS penuh -apa -apa atribut CSS boleh diubah. Tetapi butang dikunci - tidak ada yang dapat mengubah kesan visualnya kecuali pengarang komponen.

Sama seperti elemen HTML boleh mempunyai pelbagai nama kelas, satu elemen juga boleh mempunyai beberapa nama part :

<div part="box thing"> …</div>

Inilah yang kita dapat dengan ::part : Dengan mendedahkan "bahagian" elemen, kita dapat memberikan beberapa fleksibiliti tentang cara menggunakan komponen web sambil melindungi mereka di kawasan lain. Sama ada sistem reka bentuk anda, perpustakaan komponen, atau apa -apa lagi, hakikat bahawa bahagian bayangan CSS menjadi arus perdana memberikan kami alat yang menarik.