Gin*_*orf 5 javascript dom components web polymer
我正在开发一个业余项目，其中生成 HTML 文件并将其发送到前端，在前端使用 Polymer 3 和其他技术对其进行格式化和显示。
长话短说，当我调用 时querySelectorAll，它不会返回，例如 中的所有锚标记document：
document.querySelectorAll("a");
相反，它似乎只承认标签是被querySelectorAll调用节点的直接子节点时的存在。所以，如果我有：
<div>
<custom-tag1>
<custom-tag2>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo!</a>
<a href="http://www.amazon.com">Amazon</a>
</custom-tag2>
</custom-tag2>
</div>
我发现我必须首先获取document对象，然后是 body 对象，然后是对象顶层的任何内容body（例如，上面的 div 立即位于 body 内部），等等。
因此，如果我（最终！）获得对正文的引用，我可以调用：
theBody.querySelectorAll("a");
它会返回一个空列表。我必须做这样的事情：
theBody.querySelectorAll("div")[0].querySelectorAll("custom-tag1")[0].querySelectorAll("custom-tag2")[0].querySelectorAll("a");
为了获得锚元素的列表！
但是，如果锚点存在于其他地方，它就无法获取它们。
注意： Polymer 3 服务器正在运行。由于某些元素（至少是我在 Chrome 调试器中看到的元素）是影子根，因此情况可能会变得复杂。
因此，有时我们最终会这样做：
someNode.shadowRoot.querySelectorAll("a");
或类似的。
console.log如果您在所有custom-tagX元素的方法中执行 a ready（并且在onload<body>)，然后你就会明白为什么。你会看到的结果看起来像这样......
body is ready
custom-tag1 is ready
custom-tag2 is ready
...这意味着当主体加载完成后，您的聚合物特定的自定义元素将加载。
因此，为了解决这个问题，您需要在加载特定元素时发送一个事件，并让 body 使用 来监听它addEventListener。
然而，当谈到聚合物时，你不应该这样想。
为什么你<a>首先想要标签？
相反，我会构建一个行为，并将其添加到
（我查了一下，它只是针对聚合物1）custom-tag2，每次您想要对<a>自定义元素中的标签执行任何操作时，只需将该行为添加到该元素即可。
相反，我会使用 mixins 来共享对标签执行某些操作的代码<a>。
https://www.polymer-project.org/3.0/docs/devguide/custom-elements#mixins
| 归档时间： |
|
| 查看次数： |
4874 次 |
| 最近记录： |