Shadow DOM最佳实践中的JavaScript [英] JavaScript within Shadow DOM best practices

问题描述

我无法让JavaScript在我定义的Shadow DOM元素中正常运行。给出以下代码：

I'm having trouble getting JavaScript to run properly within Shadow DOM elements I'm defining. Given the following code:

<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.querySelector is returning null. If I wrap it in document.onload it no longer throws the error, but clicking the div doesn't launch the alert, either.

1. 在这种情况下，当我的代码运行时，document.onload是否正确处理？


2. 这是为阴影dom元素嵌入javascript的正确方法吗？

推荐答案

Shadow DOM树

您必须在模板中绑定您的eventHandler标记为 #testElement ：

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

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

Meaning to the original element / ShadowHost. That is, because Events from ShadowElements appear as if they originated by the ShadowHost.

Javascript实际上不是作用于ShadowDOM-Trees的范围。请参阅此博客条目，其中包含该主题：

Javascript is actually not scoped inside of ShadowDOM-Trees. See for example this blog entry, which covers exactly that topic:

请记住我花了所有时间来解释如何封装Shadow DOM CSS并保护免受父文件的影响以及所有这些文件有多棒？您可能也认为JavaScript的工作原理与我最初的工作方式相同 - 但事实并非如此。 [...]
http：// robdodson。 me / blog / 2013/09/02 / shadow-dom-javascript /

作为重新排列事件的解释写给作者ShadowHost：

As an explanation for rearranging the events to the ShadowHost the author writes:

这是因为来自阴影节点的事件必须重新定位，否则会破坏封装。 如果事件目标继续指向＃shadow-text ，那么任何人都可以在我们的Shadow DOM内部挖掘并开始弄乱。
http://robdodson.me/blog/2013 / 09/02 / shadow-dom-javascript /

This is because events coming from shadow nodes have to be retargeted otherwise they would break encapsulation. If the event target continued to point at #shadow-text then anyone could dig around inside of our Shadow DOM and start messing things up. http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

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

I suppose it is a good idea to read other articles of this blog too, as it seems to cover the topic pretty well.

使用自定义HTML元素您可以在自定义HTML元素中使用Javascript，例如在Stackoverflow上查看此答案。

With custom HTML elements you have the ability to use Javascript inside of custom HTML elements, see for example this answer on Stackoverflow.

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

Basically you must create a complete new HTML element. A tutorial is available at html5rocks. I think this is how for example the Polymer project provides its custom events.

这篇关于Shadow DOM最佳实践中的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！