Css 获取边缘中开槽照明元素的宽度/高度

我有一个发光元件，

内部元件

，插入另一个发光元件，

外部元件

。为了灵活性，

外部元素

可以使用CSS设置

内部元素

的宽度和高度。

内部元素

需要知道其宽度和高度，以确定如何绘制其SVG内容

内部元素如何跨浏览器可靠地了解自身的宽度和高度

我这里有一个活生生的例子：

我正在使用
updated（）
根据以下非常有用的信息获取宽度/高度：

在Chrome中，该示例运行良好-SVG显示“宽度=150高度=100”。但在Edge中，我得到“宽度=300高度=303.8”。请注意，即使在Edge中，
内部元素
最终也具有正确的宽度和高度（150x100），它似乎是在调用了
updated（）
之后到达的。
我发现，获取
内部元素
的渲染宽度和高度的可靠方法是在
窗口中访问它们。setTimeout（）
回调在
firstUpdated（）中注册。

这是可以证明的

当调用其'
updated（）
或
firstUpdated（）
时，LitElement并不总是能够访问自己的渲染宽度和高度，但在调用超时回调时，它似乎确实能够访问这些值

如果我能清楚地说明为什么会出现这种情况，我会更愿意将此答案标记为正确答案，但从经验上看，它是有效的。
我无法访问Edge以进行确认，但您可能对这里的一些测试感兴趣

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

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

这意味着内部元素将在外部元素注册和升级之前进行注册和升级，这意味着其大小最初将被确定为
外部元素
是
div
，然后被授予
外部元素
内部的开槽样式。交换导入，以防止发生此特定的竞争顺序

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

3） 同步测量元素意味着您可能在运行所有基于父级/基于类的/etc代码之前进行测量，使用
connectedCallback（）
中的
requestAnimationFrame（）
可以帮助确保在100%确定元素已准备好进行测量之前不进行测量

尝试此演示以确认：
属性值可能是承诺的结果？