Styling In the Shadow Dom dengan bahagian bayangan CSS?
Apr 07, 2025 am 09:26 AM 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.
Atas ialah kandungan terperinci Styling In the Shadow Dom dengan bahagian bayangan CSS?. 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)

Topik panas

CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.

Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;

Tidak, cssdoesnothavetobeinlowercase.however, menggunakanLowerCaseisRecommendorfendfor: 1) Consistencyandreadability, 2) Mengelakkaningerrorsinrelatedtechnologies, 3) potensiformanceBenefits, dan4) peningkatan yang lebih baik.

Cssismostlycase-insensitive, buturlsandfontfamilynamesarecase-sensitif.1) propertiesandvalueslikecolor: merah; arenotcase-sensitif.2) urlsmustmatchtheserver'scase, mis.,

AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.

Csscounterscanautomaticallynumbersectionsandlists.1) useCounter-resettoinitialize, counter-incrementToinCrease, andCounter () orcounters () todisplayvalues.2) CombinWithjavascriptfordynamicContentToenSureAccurateupdates.

Dalam CSS, nama pemilih dan atribut adalah sensitif kes, manakala nilai, warna yang dinamakan, URL, dan atribut tersuai adalah sensitif kes. 1. Nama pemilih dan atribut adalah kes-tidak sensitif, seperti warna latar belakang dan warna latar belakang adalah sama. 2. Warna heksadesimal dalam nilai adalah sensitif kes, tetapi warna bernama adalah sensitif kes, seperti merah dan merah tidak sah. 3. URL adalah sensitif kes dan boleh menyebabkan masalah pemuatan fail. 4. Sifat tersuai (pembolehubah) adalah sensitif kes, dan anda perlu memberi perhatian kepada konsistensi kes apabila menggunakannya.

Function-gradient () functionIncsscreatesculculargradientsthatrotatecolorstopsaroundroentroint.1.ISIISIDEALFORPIECHARTS, Progressindicators, Colorwheels, andDecorativeBackgrounds.2.itworksByDefiningColorStopsatSpecificles, OpsticalStarting
