มีสไตล์ที่นำกลับมาใช้ใหม่ได้
สไตล์ชีตที่สร้างได้คือวิธีสร้างและกระจายรูปแบบที่นำมาใช้ใหม่ได้เมื่อใช้ Shadow DOM
การสร้างสไตล์ชีตโดยใช้ JavaScript สามารถทำได้เสมอ อย่างไรก็ตาม ที่ผ่านมากระบวนการสร้างเอลิเมนต์ <style> โดยใช้ document.createElement('style') จากนั้นเข้าถึงพร็อพเพอร์ตี้ชีตเพื่อรับการอ้างอิงไปยังอินสแตนซ์ CSSStyleSheet พื้นฐาน วิธีนี้สามารถสร้างโค้ด CSS ที่ซ้ำกันและการขยายตัวของแอสเซทของโค้ดได้ และการแนบทำให้เกิดเนื้อหาที่ไม่มีการจัดรูปแบบอย่างรวดเร็ว ไม่ว่าเนื้อหาจะมีขนาดเกินหรือไม่ อินเทอร์เฟซ CSSStyleSheet เป็นคอลเล็กชันหลักของอินเทอร์เฟซตัวแทน CSS ที่เรียกว่า CSSOM ซึ่งนำเสนอวิธีแบบเป็นโปรแกรมในการจัดการสไตล์ชีตและขจัดปัญหาที่เชื่อมโยงกับเมธอดเดิม
สไตล์ชีตที่สร้างได้จะช่วยให้สามารถกำหนดและจัดเตรียมสไตล์ CSS ที่แชร์ จากนั้นจึงนำรูปแบบเหล่านั้นไปใช้กับ Shadow Roots หรือเอกสารได้อย่างง่ายดายและไม่ทำซ้ำ การอัปเดต CSSStyleSheet ที่แชร์จะมีผลกับรูททั้งหมดที่เคยนำไปใช้ และการใช้สไตล์ชีตจะทำงานพร้อมกันอย่างรวดเร็วเมื่อโหลดชีตแล้ว
การเชื่อมโยงที่ตั้งค่าโดยสไตล์ชีตที่สามารถสร้างได้จะให้ประโยชน์แก่แอปพลิเคชันต่างๆ มากมาย ธีมดังกล่าวสามารถใช้เพื่อจัดเตรียมธีมส่วนกลางที่คอมโพเนนต์จำนวนมากใช้ โดยธีมอาจเป็นอินสแตนซ์ CSSStyleSheet ที่ส่งไปยังคอมโพเนนต์ จากนั้นการอัปเดตธีมจะเผยแพร่ไปยังคอมโพเนนต์โดยอัตโนมัติ ซึ่งใช้เพื่อกระจายค่าพร็อพเพอร์ตี้ที่กำหนดเองของ CSS ไปยังโครงสร้างย่อย DOM ที่เจาะจงได้โดยไม่ต้องพึ่งการเรียงซ้อน นอกจากนี้ยังใช้เป็นอินเทอร์เฟซโดยตรงไปยังโปรแกรมแยกวิเคราะห์ CSS ของเบราว์เซอร์ ทำให้ง่ายต่อการโหลดสไตล์ชีตล่วงหน้าโดยไม่ต้องแทรกไฟล์ลงใน DOM
การสร้างสไตล์ชีต
แทนที่จะนำ API ใหม่มาใช้เพื่อบรรลุเป้าหมายนี้ ข้อมูลจำเพาะของ Style Sheets ที่สร้างได้ช่วยให้สร้างสไตล์ชีตได้อย่างจําเป็นโดยการเรียกใช้ตัวสร้าง CSSStyleSheet() ออบเจ็กต์ CSSStyleSheet ที่ได้มี 2 วิธีการใหม่ที่ช่วยให้เพิ่มและอัปเดตกฎสไตล์ชีตได้อย่างปลอดภัยยิ่งขึ้นโดยไม่ต้องเรียกใช้ Flash of Unstyled
Content (FOUC)
ทั้งเมธอด replace() และ replaceSync() จะแทนที่สไตล์ชีตด้วยสตริง CSS และ replace() จะแสดงผล "Promise" ในทั้ง 2 กรณี ระบบจะไม่รองรับการอ้างอิงสไตล์ชีตภายนอก โดยระบบจะไม่สนใจกฎ @import และจะแสดงคำเตือน
const sheet = new CSSStyleSheet();
// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');
// replace all styles:
sheet.replace('a { color: blue; }')
.then(() => {
console.log('Styles replaced');
})
.catch(err => {
console.error('Failed to replace styles:', err);
});
// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."
การใช้สไตล์ชีตที่สร้างขึ้น
ฟีเจอร์ใหม่อย่างที่ 2 จาก Style Sheets ที่สร้างได้คือพร็อพเพอร์ตี้ adoptedStyleSheets ที่มีอยู่ใน Shadow Roots และ Documents วิธีนี้ช่วยให้เรานำรูปแบบที่ CSSStyleSheet กำหนดไปใช้กับซับทรี DOM ที่ระบุได้อย่างชัดเจน ในการดำเนินการดังกล่าว เราจะตั้งค่าพร็อพเพอร์ตี้เป็นอาร์เรย์ของสไตล์ชีตอย่างน้อย 1 รายการเพื่อใช้กับองค์ประกอบนั้น
// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');
// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);
// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);
สรุปข้อมูลทั้งหมด
เมื่อใช้ Stylesheet ที่สร้างได้ นักพัฒนาเว็บจึงมีโซลูชันที่ชัดเจนสำหรับการสร้าง CSS Stylesheet และนำไปใช้กับแผนผัง DOM เรามี API ใหม่ที่อิงตาม Promise สำหรับการโหลด Stylesheet จากสตริงของแหล่งที่มา CSS ที่ใช้โปรแกรมแยกวิเคราะห์และการโหลดความหมายในตัวของเบราว์เซอร์ สุดท้าย เรามีกลไกในการนำการอัปเดตสไตล์ชีตไปใช้กับการใช้งานทั้งหมดของ StyleSheet เพื่อให้ง่ายขึ้น เช่น การเปลี่ยนธีมและค่ากำหนดสี
มองไปข้างหน้า
เวอร์ชันเริ่มต้นของสไตล์ชีตที่สร้างได้ซึ่งจัดส่งพร้อมด้วย API ที่อธิบายไว้ ณ ที่นี้ แต่กำลังดำเนินการเพื่อให้ใช้งานได้ง่ายขึ้น มีข้อเสนอที่จะขยาย FrozenArray ของ adoptedStyleSheets ด้วยวิธีการเฉพาะสำหรับการแทรกและนำสไตล์ชีตออก ซึ่งจะช่วยขจัดความจำเป็นในการโคลนอาร์เรย์และหลีกเลี่ยงการอ้างอิงสไตล์ชีตที่อาจซ้ำกันได้