ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome ฉันเห็น#shadow-rootขวาใต้<html lang="en">แท็ก ใช้ทำอะไรและใช้ทำอะไร? ฉันไม่เห็นมันใน Firefox หรือใน IE เฉพาะใน Chrome นี่เป็นคุณสมบัติพิเศษหรือไม่
ถ้าฉันเปิดมันจะแสดง<head>และ<body>และลิงค์ข้างชื่อrevealโดยการคลิกจะชี้ไปที่<head>และ<body>ไม่มีอะไรอื่น
คำตอบ:
นี่เป็นตัวบ่งชี้พิเศษที่มีShadow DOMอยู่ สิ่งเหล่านี้มีมานานหลายปีแล้ว แต่นักพัฒนาไม่เคยได้รับ API มาก่อนจนกระทั่งเมื่อไม่นานมานี้ Chrome มีฟังก์ชันนี้มาระยะหนึ่งแล้ว แต่เบราว์เซอร์อื่น ๆ ยังคงติดตาม สามารถสลับได้ในการตั้งค่า DevTools ในส่วน "องค์ประกอบ" ยกเลิกการเลือก "Show User Agent Shadow DOM" อย่างน้อยสิ่งนี้จะซ่อน Shadow DOM ใด ๆ ที่สร้างขึ้นภายใน (เช่นองค์ประกอบที่เลือก) ฉันไม่แน่ใจในทันทีว่าจะส่งผลกระทบต่อสิ่งที่ผู้ใช้สร้างขึ้นหรือไม่เช่นองค์ประกอบที่กำหนดเอง
สิ่งเหล่านี้เกิดขึ้นในสิ่งต่างๆเช่น iframe เช่นกันโดยที่คุณมีทรี DOM แยกต่างหากที่ซ้อนอยู่ภายในอีกอัน
Shadow DOM พูดง่ายๆว่าบางส่วนของหน้ามีDOM ของตัวเองอยู่ภายใน สไตล์และการเขียนสคริปต์สามารถกำหนดขอบเขตได้ภายในองค์ประกอบนั้นดังนั้นสิ่งที่ทำงานในนั้นจะดำเนินการในขอบเขตนั้นเท่านั้น
นี่เป็นหนึ่งในชิ้นส่วนหลักที่จำเป็นสำหรับWeb Componentsในการทำงาน ซึ่งเป็นเทคโนโลยีใหม่ที่ช่วยให้นักพัฒนาสามารถสร้างส่วนประกอบที่ห่อหุ้มของตนเองซึ่งนักพัฒนาสามารถใช้ได้เช่นเดียวกับองค์ประกอบ HTML อื่น ๆ
ดังตัวอย่างของ Shadow DOM เมื่อคุณมี<video>แท็กบนหน้าเว็บแท็กจะแสดงเป็นแท็กเดียวใน DOM หลัก แต่ถ้าคุณเปิดใช้งาน Shadow DOM คุณจะสามารถเห็น HTML ของโปรแกรมเล่นวิดีโอ (DOM ของผู้เล่น)
สิ่งนี้อธิบายได้อย่างเหมาะสมในบทความนี้http://webcomponents.org/articles/introduction-to-shadow-dom/
ในกรณีของส่วนประกอบของเว็บมีปัญหาพื้นฐานที่ทำให้วิดเจ็ตที่สร้างจาก HTML และ JavaScript ใช้งานยาก
ปัญหา : โครงสร้าง DOM ภายในวิดเจ็ตไม่ได้ถูกห่อหุ้มจากส่วนที่เหลือของหน้า การขาดการห่อหุ้มนี้หมายความว่าสไตล์ชีตเอกสารของคุณอาจนำไปใช้กับส่วนต่างๆภายในวิดเจ็ต JavaScript ของคุณอาจแก้ไขส่วนต่างๆภายในวิดเจ็ตโดยไม่ได้ตั้งใจ ID ของคุณอาจทับซ้อนกับ ID ภายในวิดเจ็ตและอื่น ๆ
เงา DOM อยู่ปัญหา
ตัวอย่างเช่นหากคุณมีมาร์กอัปเช่นนี้:
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>
จากนั้นแทนที่จะเป็น
Hello, world!
หน้าของคุณดูเหมือน
こんにちは、影の世界!
ไม่เพียงแค่นั้นถ้า JavaScript บนหน้าถามว่าปุ่ม textContent คือมันจะไม่ได้รับ“こんにちは、影の世界!”แต่“Hello, world!” เพราะทรีย่อย DOM ภายใต้รากเงาจะห่อหุ้ม
หมายเหตุ : ฉันได้เลือกเนื้อหาข้างต้นจากhttps://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/เนื่องจากช่วยให้ฉันเข้าใจ Shadow DOM ได้ดีกว่าคำตอบที่มีอยู่แล้วเล็กน้อย ฉันได้เพิ่มเนื้อหาที่เกี่ยวข้องที่นี่เพื่อที่จะช่วยเหลือผู้อื่น แต่ลองดูที่ลิงค์เพื่อดูการสนทนาโดยละเอียดในเรื่องเดียวกัน