การเห็นภาพแนวคิด Shadow DOM

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

สิ่งหนึ่งที่เข้าใจยากเกี่ยวกับ Shadow DOM คือวิธีที่เบราว์เซอร์แสดงผลผลิตภัณฑ์ขั้นสุดท้าย (DOM) โหนดจากโหนดโฮสต์จะเปลี่ยนเป็นจุดแทรกของ ShadowRoot อย่างน่าอัศจรรย์ แต่ในทางตรรกะแล้ว โหนดดังกล่าวจะยังคงอยู่ในโหนดโฮสต์ แปลกจัง ดังนั้น ณ เวลาแสดงผล องค์ประกอบเหล่านี้จะปรากฏเป็นส่วนหนึ่งของต้นไม้เงา ไม่ใช่โฮสต์เดิม การแสดงผลนี้เกิดขึ้นได้อย่างไรเป็นหนึ่งในส่วนที่น่าสับสนที่สุดของ Shadow DOM

เมื่อไม่กี่วันที่ผ่านมา เราได้เปิดตัวเครื่องมือที่พัฒนาขึ้นชื่อ Shadow DOM Visualizer เพื่อช่วยลดความซับซ้อนในการเรียนรู้

ซึ่งจะช่วยให้คุณเห็นภาพว่า Shadow DOM แสดงผลในเบราว์เซอร์อย่างไร ซึ่งเป็นสิ่งที่ DevTools ยังไม่มีในปัจจุบัน บล็อกโค้ดสีดําทั้ง 2 บล็อกทางด้านซ้ายแก้ไขได้ ลองเปลี่ยนจุดแทรก <content> นำออก หรือเพิ่มจุดแทรกใหม่เพื่อดูว่าต้นไม้แบบคอมโพสิต (ที่แสดงผลแล้ว) ทางด้านขวาได้รับผลกระทบอย่างไร

วางเมาส์เหนือโหนดในกราฟเพื่อไฮไลต์มาร์กอัปที่เกี่ยวข้องทางด้านซ้าย เย้ d3.js โหนดสีน้ำเงินมาจากโหนดโฮสต์ โหนดสีเหลืองมาจาก Shadow DOM <content> จุดแทรกคือสะพานเชื่อมระหว่าง 2 โลก เนื่องจากอยู่ภายใน Shadow DOM รายการเหล่านี้จึงมีสีเหลือง เส้นขอบสีน้ำเงินบ่งบอกว่ามีการเชิญโหนดโฮสต์สีน้ำเงินเข้าร่วมกลุ่มการเรนเดอร์

Shadow DOM พร้อมใช้งานใน Chrome 25 และองค์ประกอบ <template> พร้อมใช้งานใน Chrome 26 (แต่คุณใช้เวอร์ชันแรกเพื่อลองใช้เดโมได้)