querySelector在polymer ready事件后找不到元素

我有一个自定义元素，我们称之为“el barto”。它位于另一个模板的模板内

现在。我可以使用querySelector document.querySelector'el-barto'来选择它，而使用chrome开发工具控制台不会有任何问题

但如果从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毫秒后，我可以在没有长时间查询的情况下找到“埃尔巴托”？我的目标是在不使用长查询选择器的情况下找到这样的元素。

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

对于任何操纵DOM的库或框架来说，过早查询DOM总是一种危险。如果库具有复杂的初始化过程，则尤其如此。如果您的附加脚本和/或元素要求存在，请考虑在S DoMeDead函数中触发事件。这将通过祖先冒泡DOM，让您知道已升级并与直接子级一起呈现

在您选择的任何祖先中，您都可以使用addEventListener简单地侦听事件，然后添加查询，或者更好地从事件对象获取查询

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');
});

---

我很害怕。我很害怕，伙计。我担心我的代码最终会被这些事件侦听器弄得千疮百孔。但我不认为我有过多的选择。一般来说，有太多的选择不是一个好主意。一个选择是找到肯定会最后加载的东西，并制作一个事件来收听它。另一种选择是让一个祖先侦听所有必要的组件，然后通知最顶层的元素所有内容都已加载。如果这些都不能解决你的问题，那么我会考虑重新思考一些事情。

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