Question

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

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

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

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

Answer 1

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

1）在您的index.ts中，您具有以下代码：

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

这意味着内部元素将在外部元素被注册和升级之前进行注册和升级，这意味着其初始大小将像outer-element是{ {1}}，然后被授予div内的广告位样式。交换进口以防止出现此特定的比赛顺序。

2）您正在outer-element中进行测量，这可以从技术上发生在元素到达页面之前，这意味着您正在测量未渲染的元素，该元素是没有大小的元素。等到firstUpdated()可以确保您正在测量元素“页内”。

3）同步测量元素意味着您可能在运行所有基于父代/基于类/等的代码之前进行测量，可以使用connectedCallback()中的requestAnimationFrame()可以帮助您确保直到100％确保可以测量元素时才进行测量。

Answer 2

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

here对此进行了演示。

尽管调用'updated()或firstUpdated()时LitElement并不总是可以访问其自身呈现的宽度和高度，但是当超时回调为true时，它似乎确实可以访问这些值。叫。

如果我能明确说明为什么是这种情况，但我会更愿意将这个答案标记为正确，但是从经验上讲它是可行的。