title: Chrome returns 0 for offsetWidth of custom HTML element
body: <p>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:</p>
  
  <p>Minimal HTML snippet:</p>
  
  <pre><code>&lt;my-tag id="testWidth"&gt;
    &lt;div&gt;some text&lt;/div&gt;
  &lt;/my-tag&gt;
  </code></pre>
  
  <p>When reading the width of <code>my-tag</code>, I get a result of <code>0</code> in Chrome, whereas Firefox returns the correct result. In Chrome, the result is also correct if I replace <code>my-tag</code> by <code>div</code>.</p>
  
  <p>This is the expression I use to get the width:</p>
  
  <pre><code>document.getElementById('testWidth').offsetWidth
  </code></pre>
  
  <p>As far as I know, <code>my-tag</code> should be a <a href="https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-element-name" rel="noreferrer">valid custom element name</a>. Is there anything else that I am doing wrong, or is this simply a bug in Chrome?</p>
  
  <p>Chrome version: 49.0.2623.112 m</p>
  
  <p><a href="https://jsfiddle.net/f69b1efq/" rel="noreferrer">jsfiddle</a> for quick testing</p>
  
  <p>I am trying to understand if the behavior of Chrome is correct or if this is a bug.</p>
  
  <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth" rel="noreferrer">MDN documentation</a> says:</p>
  
  <blockquote>
    <p>The HTMLElement.offsetWidth read-only property returns the layout
    width of an element.</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>The same difference in behavior can also be observed for <code>span</code> tags, see <a href="https://jsfiddle.net/dbz54g9n/" rel="noreferrer">this fiddle</a>.</p>