Shadow DOM最佳实践中的JavaScript

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返回null.如果我将它包装在document.onload中它不再抛出错误,但是单击div也不会启动警报.

1. 在这种情况下,当我的代码运行时,document.onload是否正确处理？
2. 这是为阴影dom元素嵌入javascript的正确方法吗？

Answer 1

影子 DOM 树

您必须将模板标记内的 eventHandler 绑定到#testElement：

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

对原始元素/ShadowHost 的意义。也就是说，因为来自 ShadowElements 的事件看起来好像是由 ShadowHost 发起的。

Javascript 实际上不在 ShadowDOM-Trees 的范围内。例如，请参阅此博客条目，它恰好涵盖了该主题：

还记得我花了所有时间解释 Shadow DOM CSS 是如何封装和保护父文档的，以及这一切有多棒吗？您可能还认为 JavaScript 的工作方式与我一开始是一样的，但实际上并非如此。[...] https://robdodson.me/shadow-dom-javascript/

作为将事件重新安排到 ShadowHost 的解释，作者写道：

这是因为来自影子节点的事件必须重新定位，否则它们会破坏封装。如果事件目标继续指向，#shadow-text那么任何人都可以在我们的 Shadow DOM 内部挖掘并开始把事情搞砸。 https://robdodson.me/shadow-dom-javascript/

我想阅读这个博客的其他文章也是一个好主意，因为它似乎很好地涵盖了这个主题。

自定义元素

使用自定义 HTML 元素，您可以在自定义 HTML 元素中使用 Javascript，例如参见Stackoverflow 上的这个答案。

基本上，您必须创建一个完整的新 HTML 元素。html5rocks提供了一个教程。我认为这就是 Polymer 项目提供其自定义事件的方式。