Shadow DOM เป็นหัวข้อที่เข้าใจยาก มันซับซ้อน โดยจะแนะนำแนวคิดที่ไม่คุ้นเคยที่เราไม่คุ้นเคยบนเว็บ ขอบเขตการให้แสงเงา ขอบเขตการจัดรูปแบบ การกำหนดเป้าหมายใหม่ของเหตุการณ์ จุดแทรก จุดแทรกเงา โหนดของโฮสต์ โหนดแบบกระจาย ภาษานั้นใช้ภาษาของเราไปเรื่อยๆ
สิ่งหนึ่งที่สำคัญเกี่ยวกับ Shadow DOM คือวิธีที่เบราว์เซอร์แสดงผลผลิตภัณฑ์สุดท้าย (DOM) โหนดจากโหนดโฮสต์จะสลับเข้าไปในจุดแทรกของ ShadowRoot ได้อย่างน่าอัศจรรย์ แต่จะยังคงอยู่ในโหนดโฮสต์ แปลกจัง ดังนั้น ณ เวลาแสดงผล ภาพจะปรากฏเป็นส่วนหนึ่งของ Shadow Tree ไม่ใช่โฮสต์เดิม วิธีที่การแสดงผลนี้เกิดขึ้นเป็นหนึ่งในชิ้นส่วนต่างๆ ของ Shadow DOM ที่สร้างความสับสนมากที่สุด
เมื่อไม่กี่วันก่อน เราได้เปิดตัวเครื่องมือที่ชื่อ Shadow DOM Visualizer อยู่ เพื่อช่วยลดขั้นตอนการเรียนรู้
ฟีเจอร์นี้ช่วยให้คุณเห็นภาพการแสดงผล Shadow DOM ในเบราว์เซอร์ ซึ่งเป็นสิ่งที่เครื่องมือสําหรับนักพัฒนาเว็บยังไม่มีในปัจจุบัน บล็อกโค้ดสีดำทางด้านซ้ายทั้ง 2 บล็อกสามารถแก้ไขได้ ลองเปลี่ยนจุดแทรก <content> นำออก หรือเพิ่มจุดแทรกใหม่เพื่อดูผลกระทบต่อโครงสร้างที่ทำการ Composite (แสดงผลแล้ว) ทางด้านขวา
วางเมาส์เหนือโหนดในกราฟเพื่อไฮไลต์มาร์กอัปที่เกี่ยวข้องทางด้านซ้าย เย้สำหรับ d3.js! โหนดสีน้ำเงินมาจากโหนดโฮสต์ โหนดสีเหลืองมาจาก Shadow DOM จุดแทรก <content> เป็นสะพาน
เชื่อมระหว่าง 2 โลก เทมเพลตเหล่านี้อยู่ในสีเหลืองเนื่องจากอยู่ใน Shadow DOM อย่างสมเหตุสมผล ขอบสีน้ำเงินบ่งชี้ว่ามีการเชิญโหนดโฮสต์สีน้ำเงินให้เข้าร่วมฝ่ายการแสดงผล
Shadow DOM พร้อมใช้งานใน Chrome 25 และองค์ประกอบ <template> พร้อมใช้งานใน Chrome 26 (แม้ว่าคุณจะต้องการแค่รายการแรกเพื่อลองใช้เดโม)