Events 处理聚合元素中的调整大小事件的最佳实践是什么？

我正在尝试创建一个从Canvas元素扩展而来的“Viewport”类型的元素。我打算让它填充父容器，但这似乎不是很简单

canvas元素不能与style=“width:100%；height:100%”一起使用（如果未设置特殊画布宽度和高度属性，它将恢复为默认值300x150像素；如果尝试将这些属性设置为“100%”，它将变为100x100像素）。这让我需要根据父元素的大小手动设置画布元素的宽度。但是，当我试图找到一种方法来访问调整大小事件时，我会不知所措，我可以从自定义元素的角度添加一个处理程序。我似乎无法从画布中的任何位置访问window.on.resize自定义元素。我必须从外部执行此操作吗

以下是聚合物元素定义的示例：

@主人{
：范围{
边际：0px；
填充：0px；
显示：块；
位置：相对位置；
宽度：100%；
身高：100%；
背景：白鹭；
溢出：可见；
边界：0；
}
}
div{
边界：0；
边际：0px；
填充：0px；
宽度：100%；
身高：100%；
}

下面是附带的polymer类定义中的一些dart代码，用于尝试处理我根据这个问题的建议解决方案所做的调整大小

@覆盖
附页（）{
super.attached（）；
viewPortContainer=shadowRoot.querySelector（“容器”）；
window.onResize.listen（resizecontainer）；
}
void resizecontainer（事件e）{
wpWidth=viewPortContainer.clientWidth；
wpeight=viewPortContainer.clientHeight；
打印（“调整宽度：$wpWidth，高度：$wpHeight”）；
}

---

但是，这会导致一个错误，即每次调整大小事件的高度都会增加三个像素，即使边距和填充设置为零。

OnResize在自定义元素中对我有效

@覆盖
附页（）{
super.attached（）；
window.onResize.listen（（e）{
打印（例如currentTarget.innerWidth）；
});
}

这就是我将如何在聚合物中实现这一点

 connectedCallback() {
    super.connectedCallback();
    this._onResize = this.onResize.bind(this);
    window.addEventListener("resize", this._onResize);
 }

 onResize(e) {
    console.log('width', e.currentTarget.innerWidth);
 }

 disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener("resize", this._onResize);
 }

---

谢谢，这很有帮助-它提供了放置事件处理程序的正确位置！但是，当尝试将画布设置为与放置画布元素的容器相同的宽度和高度时，似乎会在每个调整大小事件中将容器高度扩展三个像素（而不是宽度）我将所有填充和边距设置为0。最近我在另一个帖子中发布了关于camas的类似内容。我必须检查3px增长问题，看看它是否也影响到我。我将在周末发布Polymer 2.0中的answerWorks（我只在Polymer 2.0中测试过）它应该在聚合物3.0中也能工作，我在那里用过。