Modul CSS (yang asli)

Modul CSS yang disokong oleh penyemak imbas sebenarnya dipanggil "Skrip Modul CSS". Ini berbeza dengan projek sumber terbuka yang popular, yang melaksanakan gaya skop dengan mencipta pengenal nama kelas yang unik dalam HTML dan CSS.

Modul CSS asli adalah sebahagian daripada modul ES (sama seperti modul JSON yang kami diperkenalkan baru -baru ini):

 // modul ES biasa mengimport bertindak balas dari "https://cdn.skypack.dev/ qROFED]";

// modul json baru import configdata dari './config-data.json' assert {type: 'json'};

// Modul CSS Modul Import Stylesheet dari "./styles.css" assert {type: "css"};

Kali pertama saya melihat ini adalah dari tweet Justin:

Pada masa ini, ini hanya ciri Chrome. Pautan Berkaitan:

• Pelaksanaan Niat: Modul CSS v1
• Status Platform Chrome: Skrip Modul CSS
• Github/whatwg: Memperkenalkan skrip modul CSS

Pada masa penulisan, ia hanya berfungsi di Canary Chrome dengan ciri -ciri platform web eksperimen yang didayakan. Jika anda ingin bertanya, "Bilakah saya boleh menggunakannya dalam projek pengeluaran dan pengguna projek -projek ini menggunakan pelbagai pelayar?" Mungkin mengambil masa bertahun -tahun. Mungkin tidak pernah. Tetapi ia masih menarik. Mungkin sokongan akan berkembang pesat. Mungkin anda akan mengusahakan projek elektron atau projek lain yang anda boleh bergantung pada ciri penyemak imbas tertentu.

Ini kelihatan seperti lanjutan untuk stylesheets yang boleh dibina, dan mereka juga terhad kepada pelayar krom, jadi pelayar yang "tertinggal" dalam hal ini mesti bermula dari sana.

Saya mencuba idea Justin di sini:

Jika saya merekodkan apa yang saya dapat dari import modul CSS, ia adalah cssstylesheet:

Jika anda ingin menggunakan gaya ... terserah kepada anda. Idea Justin pada dasarnya menggunakan gaya sebagai satu baris kod, kerana ia berlaku kepada LIT-HTML menyokong CSSStylesheet (dokumen-dokumen ini tidak menyatakan secara jelas ini, tetapi saya fikir mereka akan menerangkannya pada satu ketika). Untuk komponen web asli, perbezaannya tidak banyak: anda mengimportnya, dapatkan cssstylesheet, dan kemudian gunakannya ke komponen web, sebagai contoh:

 this.shadowroot.adoptedStylesheets = [mycssstylesheet];

Saya rasa makna semua ini adalah:

• Kami memerlukan cara untuk mengimport stylesheets di JavaScript, dan ini pada dasarnya adalah cara pertama yang sangat jelas yang saya tahu,
• Sekarang, jika kita mahu, kita boleh mengakses akses ke CSS untuk beroperasi,
• Ia kelihatan sangat baik untuk penggunaan komponen web, tetapi ia adalah universal. Sebaik sahaja anda mempunyai lembaran gaya, anda boleh menggunakannya seperti yang anda suka.

Atas ialah kandungan terperinci Modul CSS (yang asli). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!