querySelector 在聚合物就绪事件后找不到元素

Question

我有一个自定义元素（我们称之为 'el-barto'）。它在另一个模板的模板内。

现在。我可以使用 querySelector document.querySelector('el-barto') 到 select 使用 chrome 开发工具控制台没有任何问题。

但是相同的查询 returns 如果从 js 文件完成则什么也没有。

$(document).ready(function() { document.querySelector('el-barto'); });

人们说：为 polymer-ready 添加事件侦听器，我也这样做了：

...
document.addEventListener('polymer-ready', function() {
    console.log('yey, poly is ready!');
    console.log(document.querySelector('el-barto'));
});
...

这会打印：

yey, poly is ready!
null

所以我继续设置超时，就像这样：

...
document.addEventListener('polymer-ready', function() {
    console.log('yey, poly is ready!');
    setTimeout(function(){
        console.log(document.querySelector('el-barto'));
    },100);
});
...

你知道什么？

yey, poly is ready!
<el-barto>...</el-barto>

（我注意到，小于 100 毫秒的超时 returns 对于查询 select 为空）。

现在，我不会再左右设置超时了。

我是不是做错了什么？

甚至更多。

如果我使用查询select或类似：

document.querySelector('#main').content.querySelector('#sub-main').content.querySelector('#sub-sub-main').content.querySelector('el-barto')

它会在不设置超时的情况下工作。但问题是为什么在 100 毫秒后我可以找到 'el-barto' 而无需这么长的查询？我的目标是在不使用那些长查询 selectors.

的情况下找到这些元素

Answer 1

当所有内容实际上都在 DOM 中时，'polymer-ready' 事件不会触发。它仅确认页面加载时存在的所有元素均已导入并升级。此外，仅仅因为元素被升级并不意味着 DOM 被完全操纵（尽管如果你没有做太多复杂的事情通常是这样）。如果您的自定义元素根据属性动态添加到 DOM，则尤其如此。

过早查询 DOM 对于任何操纵 DOM 的库或框架来说总是危险的。如果库具有复杂的初始化过程，则尤其如此。如果您的其他脚本 and/or 元素需要 <el-barto> 存在，请考虑在 <el-barto> 的 domReady 函数中触发一个事件。这将通过祖先冒泡 DOM，让您知道 <el-barto> 已升级并存在（及其直系子女）。

无论您选择哪个祖先，您都可以使用 addEventListener 简单地监听您的事件并添加您的查询，或者更好的是，从事件对象中获取 <el-barto>。

Polymer('el-barto', {
    ... other el-barto code ...
    domReady: function() {
        this.fire('el-barto-ready');
    }
    ... other el-barto code ...
});

其他任何地方...

[ancestor].addEventListener('el-barto-ready', function() {
    console.log(document.querySelector('el-barto');
});

querySelector 在聚合物就绪事件后找不到元素

querySelector doesn't find elements after polymer-ready event

polymer