Defining olderShadowRoot on HTMLShadowElement is inconvenient for code that wants to walk the list of ShadowRoots. It is necessary to write something like:

function forEachShadowRoot(host, f) {
  for (var s = host.shadowRoot; s; s = olderShadowRootOf(s)) {
    f(s);
  }
}

function olderShadowRootOf(s) {
  var shadowElements = s.querySelectorAll('shadow');
  for (var i = 0; i < shadowElements.length; i++) {
    var shadowElement = shadowElements[i];
    if (shadowElement.olderShadowRoot) {
      return shadowElement.olderShadowRoot;
    }
  }
  // There were no shadow elements, or they were all inert
  shadowElement = document.createElement('shadow');
  s.appendChild(shadowElement);
  var result = shadowElement.olderShadowRoot;
  shadowElement.remove();
  return result;
}

This seems excessively complicated for this use case; it would be better if olderShadowRoot was defined on ShadowRoot, then one could simply write the loop in a straightforward way:

function forEachShadowRoot(host, f) {
  for (var s = host.shadowRoot; s; s = s.olderShadowRoot) {
    f(s);
  }
}