Shadow DOM แบบประกาศ

DOM เงาแบบดั้งเดิมสร้างขึ้นผ่าน JavaScript (attachShadow) สำหรับหน้าเว็บที่แสดงผลจากเซิร์ฟเวอร์ นั่นหมายความว่าต้นไม้เงาจะว่างเปล่าจนกว่า JS จะทำงาน ซึ่งขัดกับจุดประสงค์ของ SSR ที่ต้องส่ง HTML ครบถ้วนตั้งแต่ไบต์แรก DOM เงาแบบประกาศช่วยแก้ปัญหานี้

<template> ที่มี shadowrootmode="open" จะประกาศรากเงาใน HTML ขณะประมวลผล เบราว์เซอร์จะแนบรากเงาเข้ากับองค์ประกอบแม่โดยอัตโนมัติ และเนื้อหาของเทมเพลตจะกลายเป็นต้นไม้เงา ไม่จำเป็นต้องใช้ JavaScript

DOM เงาแบบประกาศช่วยให้คอมโพเนนต์เว็บแสดงผลจากเซิร์ฟเวอร์ได้อย่างแท้จริง: เซิร์ฟเวอร์ส่งต้นไม้เงาครบถ้วนไว้ใน HTML โดยตรง เบราว์เซอร์วิเคราะห์และแนบต้นไม้ดังกล่าวก่อนที่ JS ใด ๆ จะทำงาน และ JavaScript สำหรับไฮเดรตสามารถทำงานต่อจากพื้นฐานที่แสดงผลครบถ้วนแล้วได้ จึงทัดเทียมกับ SSR ของเฟรมเวิร์ก

มีโหมดเดียวกับ attachShadow แบบ命令: shadowrootmode="open" จะเปิดเผยเงาผ่าน element.shadowRoot ส่วน shadowrootmode="closed" จะซ่อนเงาไว้ พฤติกรรมเหมือนกับส่วนที่แนบด้วย JavaScript ทุกประการ

เบราว์เซอร์จะแนบรากเงาเมื่อพบ <template shadowrootmode> เป็นครั้งแรก หลังจากแนบแล้ว เทมเพลตจะถูกใช้ไป การค้นหาเทมเพลตนี้ในภายหลังจึงไม่พบสิ่งใด ซึ่งสอดคล้องกับวงจรชีวิตของ attachShadow: เงาจะคงอยู่ตลอดอายุขององค์ประกอบ

องค์ประกอบลูกใน DOM ปกติ เช่น <p> ที่อยู่นอก <template> ในตัวอย่าง จะถูกส่งเข้าไปแสดงผ่านองค์ประกอบ <slot> ภายในต้นไม้เงาเช่นเดียวกับ DOM เงาแบบ命令 แนวทางการประกอบองค์ประกอบเหมือนเดิม ต่างกันเพียงกลไกการแนบเท่านั้น

หาก <my-card> เป็นองค์ประกอบกำหนดเองที่ลงทะเบียนไว้ กระบวนการอัปเกรดจะใช้รากเงาที่แนบอยู่แล้วแทนการเรียก attachShadow อีกครั้ง คลาสขององค์ประกอบกำหนดเองสามารถอ่าน this.shadowRoot ได้ใน connectedCallback โดยไม่ต้องสร้างรากเงาขึ้นมาเอง

Lit-html render คอมโพเนนต์ของ Astro และเฟรมเวิร์กอื่น ๆ อีกหลายตัวสามารถส่งออก DOM เงาแบบประกาศเป็นส่วนหนึ่งของผลลัพธ์ SSR ได้แล้ว การสร้างระบบเองก็ทำได้เช่นกัน เพราะระบบสร้างแม่แบบจากสตริงทุกชนิดสามารถเขียนเทมเพลตที่มี shadowrootmode ได้

DOM เงาแบบประกาศมีให้ใช้งานใน Chrome, Edge, Safari และ Firefox เบราว์เซอร์รุ่นเก่าจะเพิกเฉยต่อองค์ประกอบ <template> อย่างเงียบ ๆ เนื้อหาภายในเทมเพลตจึงไม่ปรากฏ ซึ่งเป็นการลดความสามารถอย่างเหมาะสมสำหรับสภาพแวดล้อมที่ไม่รองรับ

หากต้องการรองรับได้กว้างขึ้น สคริปต์ขนาดเล็กสามารถเดินสำรวจ DOM และแปลง template[shadowrootmode] ให้เป็นรากเงาจริงได้ ให้เรียกใช้ก่อนลงทะเบียนองค์ประกอบกำหนดเองใด ๆ เพื่อให้การอัปเกรดองค์ประกอบในภายหลังมองเห็นต้นไม้เงาที่คาดไว้

DOM เงาแบบประกาศทำให้โครงสร้างซ้ำกัน: เนื้อหาของ <template> อยู่ใน HTML แม้ว่าโครงสร้างเดียวกันจะถูกฝังอยู่ในคลาสของคอมโพเนนต์ด้วย สำหรับหน้าที่มีองค์ประกอบเดียวกันจำนวนมาก สิ่งนี้ทำให้ข้อมูลที่ส่งไปมีขนาดใหญ่ขึ้น เฟรมเวิร์กจะกำจัดข้อมูลซ้ำให้ ส่วนการแสดงผลจากเซิร์ฟเวอร์ที่สร้างเองอาจต้องทำเช่นเดียวกัน

หากคุณเผยแพร่คอมโพเนนต์เว็บและให้ความสำคัญกับการแสดงผลตั้งแต่ไบต์แรกหรือ SEO ควรนำมาใช้ได้เลย ความสามารถนี้มีความเสถียร ได้รับการรองรับ และปรับปรุงการแสดงผลจากเซิร์ฟเวอร์สำหรับแอปพลิเคชันที่ใช้คอมโพเนนต์เว็บอย่างมาก แต่ไม่เกี่ยวข้องกับแอปพลิเคชันที่ไม่ได้ใช้ DOM เงา

DOM เงาแบบประกาศแก้ปัญหาใดเมื่อเทียบกับ attachShadow แบบ命令

DOM เงาแบบประกาศใช้ <template shadowrootmode="open"> ภายในองค์ประกอบกำหนดเองเพื่อแนบรากเงาขณะประมวลผล โดยไม่ต้องใช้ JS ช่วยให้คอมโพเนนต์เว็บรองรับ SSR ได้อย่างแท้จริง: ต้นไม้เงา รูปแบบที่มีขอบเขต และสล็อตทำงานได้ก่อนการไฮเดรต รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด และมีโพลีฟิลล์สำหรับเบราว์เซอร์รุ่นเก่า เฟรมเวิร์กอย่าง Lit และ Astro สามารถส่งออกความสามารถนี้โดยอัตโนมัติ