Chrome returns 0 for offsetWidth of custom HTML element

Question

While trying to create an Angular directive that adapts the size of its content to the size of the container, I stumbled over the following issue:

Minimal HTML snippet:

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

When reading the width of my-tag, I get a result of 0 in Chrome, whereas Firefox returns the correct result. In Chrome, the result is also correct if I replace my-tag by div.

This is the expression I use to get the width:

document.getElementById('testWidth').offsetWidth

As far as I know, my-tag should be a valid custom element name. Is there anything else that I am doing wrong, or is this simply a bug in Chrome?

Chrome version: 49.0.2623.112 m

jsfiddle for quick testing

I am trying to understand if the behavior of Chrome is correct or if this is a bug.

The MDN documentation says:

The HTMLElement.offsetWidth read-only property returns the layout width of an element.

As far as I can tell, it does not say that this only applies to elements with block display. And I also back my understanding by the fact that Firefox returns what I expect.

The same difference in behavior can also be observed for span tags, see this fiddle.

Answer 1

You need to style my-tag element with display: block

Here's fiddle https://jsfiddle.net/Lvntyrjy/1/

Answer 2

You can also get the width of the content of the custom element like this:

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