JavaScript ضمن أفضل ممارسات Shadow DOM

Question

أواجه مشكلة في تشغيل JavaScript بشكل صحيح ضمن عناصر Shadow DOM التي أحددها.بالنظر إلى الكود التالي:

<template id='testTemplate'>
 <div id='test'>Click to say hi</div>
 <script>
  var elem = document.querySelector('#test');
  elem.addEventListener('click', function(e) {
     alert("Hi there");
  });
</script>
</template>

<div id="testElement">Host text</div>

<script>
  var shadow = document.querySelector('#testElement').createShadowRoot();
  var template = document.querySelector('#testTemplate');
  shadow.appendChild(template.content.cloneNode(true));
</script>

Document.querySelector يُرجع قيمة فارغة.إذا قمت بتغليفه في document.onload، فلن يُظهر الخطأ بعد ذلك، ولكن النقر فوق div لا يؤدي إلى تشغيل التنبيه أيضًا.

1. هل document.onload هو الطريقة الصحيحة للتعامل عند تشغيل الكود الخاص بي في هذه الحالة؟
2. هل هذه هي الطريقة الصحيحة لتضمين جافا سكريبت لعناصر دوم الظل؟

Answer 1

شجرة الظل DOM

يجب عليك ربط EventHandler الخاص بك داخل علامة القالب بـ #testElement:

var elem = document.querySelector('#testElement');

المعنى للعنصر الأصلي / ShadowHost.وذلك لأن الأحداث من ShadowElements تظهر كما لو أنها نشأت بواسطة ShadowHost.

في الواقع لم يتم تحديد نطاق Javascript داخل ShadowDOM-Trees.انظر على سبيل المثال إدخال المدونة هذا، والذي يغطي هذا الموضوع بالضبط:

هل تذكر عندما أمضيت كل هذا الوقت في شرح كيفية تغليف Shadow DOM CSS وحمايته من المستند الأصلي ومدى روعة كل ذلك؟قد تعتقد أيضًا أن JavaScript تعمل بنفس الطريقة، كما فعلت في البداية، ولكن هذا ليس هو الحال في الواقع.[...] http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

كتفسير لإعادة ترتيب الأحداث إلى ShadowHost كتب المؤلف:

هذا بسبب يجب إعادة توجيه الأحداث القادمة من عقد الظل وإلا فإنها ستؤدي إلى كسر التغليف. إذا استمر هدف الحدث في الإشارة إليه #shadow-text ومن ثم يمكن لأي شخص البحث داخل Shadow DOM الخاص بنا والبدء في إفساد الأمور. http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

أعتقد أنها فكرة جيدة أن تقرأ مقالات أخرى في هذه المدونة أيضًا، حيث يبدو أنها تغطي الموضوع بشكل جيد.

عناصر مخصصة

باستخدام عناصر HTML المخصصة، لديك القدرة على استخدام Javascript داخل عناصر HTML المخصصة، انظر على سبيل المثال هذه الإجابة على ستاكوفيرفلوو.

في الأساس يجب عليك إنشاء عنصر HTML جديد كامل.البرنامج التعليمي متاح في HTML5rocks.أعتقد أن هذه هي الطريقة التي يقدمها مشروع البوليمر على سبيل المثال أحداثها المخصصة.