Question

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

现在。我可以使用querySelector document.querySelector('el-barto')选择它，使用chrome dev工具控制台没有任何问题。

但是如果从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毫秒的超时为查询选择器返回null。）

现在，我不打算左右设置超时。

我在这里做错了吗？

更多。

如果我使用查询选择器，如：

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

它可以在不设置超时的情况下工作。但问题是为什么在100毫秒之后我可以找到没有这个长期查询的'el-barto'？我的目标是在不使用那些长查询选择器的情况下找到这样的元素。

Answer 1

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

过早地查询DOM对任何操纵DOM的库或框架来说都是一个危险。如果库具有复杂的初始化过程，则尤其如此。如果您的其他脚本和/或元素要求<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在聚合物就绪事件之后找不到元素

1 个答案: