在“边缘的开槽照明元件中获取宽度/高度

Posted 2023-02-04

我有一个照明元件inner-element，插入了另一个照明元件outer-element。为了灵活性，outer-element可以使用CSS设置inner-element的宽度和高度。 inner-element需要知道其宽度和高度才能确定如何绘制其SVG内容。

inner-element如何在浏览器中可靠地了解其自身的宽度和高度？

我在这里有一个在线示例：https://stackblitz.com/edit/7pkfkx-j9rnx9

我正在根据以下非常有用的信息使用updated()获取宽度/高度：https://github.com/Polymer/lit-element/issues/507#issuecomment-459546838

[在Chrome中，该示例工作正常-SVG显示“宽度= 150高度= 100”。但是在Edge中，我得到“宽度= 300高度= 303.8”。请注意，即使在Edge中，inner-element最终仍具有正确的宽度和高度（150x100），它似乎在调用updated()之后才到达那里。

我有一个内层元素，插入另一个外层元素。为了灵活起见，外部元素可以使用CSS设置内部元素的宽度和高度。内部...

答案

我无权访问Edge进行确认，但是您可能有兴趣在此处进行测试。

另一答案

[我发现获得inner-element的渲染宽度和高度的可靠方法是在window.setTimeout()中注册的firstUpdated()回调中访问它们。