I am not sure about this. We expose the composed shadow tree with .shadowRoot and .olderShadowRoot. This would expose the tree stack, and I don't know if that's good.

> I am not sure about this. We expose the composed shadow tree with
> .shadowRoot and .olderShadowRoot. This would expose the tree stack, and I
> don't know if that's good.

Then we can hide older shadow root by putting younger one over it without any
<shadow> element. If we prefer encapsulation by default, this would be way to.
If we switch to all-visible-by-default principle, we should have this.
I'm not sure which is better either.
If it is intentional not to have this, that's totally fine for me.

Currently olderShadowRoot is defined only as a property of a <shadow> element. 

Given a shadowRoot, to find olderShadowRoot, one must find the <shadow> element inside it and then interrogate that object for the olderShadowRoot. 

This is inconvenient and it would be simpler if olderShadowRoot were simply a property of a shadowRoot node.

*** Bug 21166 has been marked as a duplicate of this bug. ***

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);
  }
}

(In reply to comment #0)
> It could be named olderShadowRoot but |shadowRoot| aligns ShadowAware
> interface and better for iterating over for() loop.

I agree that this simplifies loops. However it could be confusing if in future ShadowRoot could have a ShadowRoot, or if ShadowRoot became an element. So I think the name olderShadowRoot is better.

Since anyone who could have an objection has had a reeeeeeeasonable time to respond, I am implementing this in Blink now (behind a flag.)

*** Bug 20355 has been marked as a duplicate of this bug. ***

The spec was updated: https://dvcs.w3.org/hg/webcomponents/rev/867a6026f003