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

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

Answer 1

Shadow 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那么任何人都可以在我们的阴影内挖掘DOM并开始弄乱事情。 http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

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

自定义元素

使用自定义HTML元素，您可以在自定义HTML元素中使用Javascript，请参阅Stackoverflow上的示例this answer。

基本上，您必须创建一个完整的新HTML元素。有一个教程at html5rocks。我认为这就是Polymer项目提供its custom events的方式。

Shadow DOM最佳实践中的JavaScript

1 个答案:

Shadow DOM树

自定义元素