domReady vs ready-迁移到Polymer 1.0

在Polymer0.5中，我有以下代码：

模板：

<div class="scroll">
    <div class="content">
        <content></content>
    </div>
</div>

这段代码有效，我收到了一个非零值的宽度

---

现在我正在尝试迁移到Polymer1.0，我在div中添加了一个ID：

<div class="scroll">
    <div id="content" class="content">
        <content></content>
    </div>
</div>

但是，此宽度为

0

---

旧的

domReady

功能与新的

ready

功能之间是否存在差异？我也尝试过使用

附加的

功能，但也不起作用

当我稍后尝试访问

宽度时（由按下按钮触发），我会得到我要查找的非零值


元素的使用方式如下：

<my-scrollbar>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus leo, sagittis lobortis velit vel, viverra vulputate purus. Proin lacinia magna eu erat iaculis, eget mollis lectus mattis. 
</my-scrollbar>


Lorem ipsum dolor sit amet，是一位杰出的献身者。狮子座狮子座狮子座狮子座狮子座射手座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座射手座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座。这是一种巨大的疾病。

因此，内部文本决定了元素的尺寸。
原来我的原始代码是在Safari中工作的，而不是在Chrome中

根据建议，我添加了一些异步，现在它可以在两种浏览器中工作

最后答覆：

attached: function() {
    this.async(function(){
        var width = this.$.content.scrollWidth;
    },1)
}

另一种方法是在使用DOM之前“刷新”它。在这种情况下，代码为：

attached: function() {
  var width;
  Polymer.dom.flush();
  width = this.$.content.scrollWidth;
},

因为这是同步的、声明性的，并且不涉及闭包，所以使用它可能更容易

更多信息：
此。$。
自动节点查找仅适用于ID，而不适用于类。这是模板中的输入错误吗？抱歉，我在该元素中添加了一个
ID
，因为我不确定类是否是问题所在。我将在中编辑它。因为
this.$.content
已经引用了节点，所以您应该能够避开
this.$.content.scrollWidth
。我认为这不会解决您的问题，但可以在将来为您节省一些打字时间。我刚刚查看了
async
的文档，其中指出，如果调用
async
时没有等待时间，那么它将使用“微任务计时”执行，按照Polymer的定义，这是在下一个事件/绘制之前。尝试使用
Polymer.async（function（）{…}，1）
包装宽度检查，以强制其等待绘制完成。同时将其移动到
attached
中，以确保在组件连接到DOM后执行该检查。它可能在
ready
中工作，但这可能会导致
async
的竞争条件。很高兴它工作了！一定要“接受”这个答案，因为它解决了问题。是的，不过几天内我不能排除我自己的解决方案。
attached: function() {
    this.async(function(){
        var width = this.$.content.scrollWidth;
    },1)
}

attached: function() {
  var width;
  Polymer.dom.flush();
  width = this.$.content.scrollWidth;
},