Custom element instantiation processes a custom element’s prototype chain "in reverse order (starting with the most-derived object)".

This means in step 4.4.2, that more derived custom elements create their ShadowRoot first. This has the effect of masking their ShadowRoot with less-derived custom elements, which is counter-intuitive. For example, given:

<element name="x-happy-button" extends="button">
  <template>
      <img src="balloons.gif">
      <content></content>
      <img src="clowns.gif">
  </template>
</element>

<element name="x-super-happy-button" extends="x-happy-button">
  <template>
    <div style="width: 500px; height: 500px; background: teal;">
      <img src="stars.gif">
      <shadow></shadow>
      <img src="puppies.gif">
    </div>
  </template>
</element>

then

<x-super-happy-button>Hello!</x-super-happy-button>

will not be big, teal, nor have stars nor puppies, because the super happy ShadowRoot content will have been preempted by the younger, merely happy ShadowRoot which was instantiated later.