Best Practices: autonomous custom elements vs extending native HTML elements (customized built-in elements)
<p>A common practice with Custom Elements, at least in Polymer (the most popular Web Components framework), is to define a new custom element. This, IMHO, is not a good practice for <strong>rendered</strong> elements because the element cannot get rendered progressively and has to wait until it is loaded (registered/defined and built up further). </p>

<p>In the contrary, if the element is extended from a native element, it can progressively be enhanced as the regular elements do. The only reason I can think of against this is that new elements look more elegant (<code>my-element&gt;</code> vs <code>&lt;div is=my-element&gt;</code>).</p>

<p>Am I missing something here? What are the pros and cons of each method?</p>

<p>Update: According to one of the comments, both method are equal in terms of progressive enhancements. However, I have learned a lot more about the differences between the two methods <a href="https://github.com/w3c/webcomponents/issues/509" rel="nofollow noreferrer">from here</a>, hence, the question remains valid.</p>