1

我有一个 lit-element, inner-element，插入另一个 lit-element, outer-element。为了灵活性，可以使用 CSSouter-element设置宽度和高度。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()被调用后才到达那里。

4

2 回答 2

2

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

1）在你的index.ts你有以下代码：

    import './inner-element.js';
    import './outer-element.js';

这意味着内部元素将在外部元素注册和升级之前注册和升级，这意味着它的大小最初将被确定为好像outer-element是 a div，然后随后被授予 内部的开槽样式outer-element。交换导入以防止发生这种特定的比赛顺序。

2）您正在测量从技术上讲firstUpdated()在元素点击页面之前可能发生的情况，这意味着您正在测量未渲染的元素，这是一个没有大小的元素。等到可以确保您正在“页面内”测量元素。connectedCallback()

3) 同步测量元素意味着您可能在所有基于父/基于类/等的代码运行之前进行测量，使用requestAnimationFrame()inconnectedCallback()可以帮助确保您在 100% 确定元素准备好之前不进行测量被测量。

试试这个演示来确认：https ://stackblitz.com/edit/measure?file=inner-element.js

于 2019-08-21T02:14:59.207 回答
1

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

此处演示了这一点。

updated()虽然 LitElement 在调用它的or时并不总是可以访问自己呈现的宽度和高度firstUpdated()，但在调用超时回调时它似乎确实可以访问这些值。

如果我能阐明为什么会这样，我会更愿意将此答案标记为正确，但从经验上看它是有效的。

于 2019-02-06T20:52:28.863 回答