Chrome为自定义HTML元素的offsetWidth返回0

Question

在尝试创建一个Angular指令，使其内容的大小适应容器的大小时，我偶然发现了以下问题：

最小的HTML代码段：

<my-tag id="testWidth">
  <div>some text</div>
</my-tag>

在阅读my-tag的宽度时，我在Chrome中获得了0的结果，而Firefox则返回了正确的结果。在Chrome中，如果我将my-tag替换为div，结果也是正确的。

这是我用来获取宽度的表达式：

document.getElementById('testWidth').offsetWidth

据我所知，my-tag应该是valid custom element name。还有其他我做错了，或者这只是Chrome中的一个错误？

Chrome版本：49.0.2623.112 m

jsfiddle用于快速测试

我试图了解Chrome的行为是否正确或是否是错误。

MDN documentation说：

  

HTMLElement.offsetWidth只读属性返回布局   元素的宽度。

据我所知，并不是说这仅适用于具有块显示的元素。我还通过Firefox返回我期望的事实来支持我的理解。

span代码也可以观察到相同的行为差异，请参阅this fiddle。

Answer 1

您需要使用display: block

设置my-tag元素的样式

这是小提琴https://jsfiddle.net/Lvntyrjy/1/

Answer 2

您还可以像这样获取自定义元素内容的宽度：

document.querySelector('custom-element').shadowRoot.querySelector('#content').offsetWidth