This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
If some shadow host has multiple shadow roots and each shadow root has <shadow>, what reset-style-inheritance flag should be applied? For example, - see reset-style-inheritance flag of an insertion point in the oldest shadow root, - see reset-style-inheritance flag of an insertion point in the youngest shadow root, - see whether all insertion points have reset-style-inheritance flag set to be true or not (all reset-style-inheritance flags are true, apply reset-style-inheritance), - see whether more than one of insertion points has reset-style-inheritance flag set to be true or not (i.e. one of reset-style-inheritance flag is true, apply reset-style-inheritance) - or some way. If we have the following html: <div id="host"><span>child-1</span></div> ... var host = document.getElementById('host'); var oldestShadowRoot = new WebKitShadowRoot(host); var olderShadowRoot = new WebKitShadowRoot(host); var youngerShadowRoot = new WebKitShadowRoot(host); var youngestShadowRoot = new WebKitShadowRoot(host); oldestShadowRoot.innerHTML = "<shadow></shadow>"; olderShadowRoot.innerHTML = "<shadow></shadow>"; youngerShadowRoot.innerHTML = "<shadow></shadow>"; youngestShadowRoot.innerHTML = "<shadow></shadow>"; and reset-style-inheritance flags are set in the following way: +-------------------------------------------------+ | oldest | older | younger | youngest | apply reset-style-inheritance? | +-------------------------------------------------+ | true | true | true | true | yes | +-------------------------------------------------+ | true | true | true | false | yes? no? | +-------------------------------------------------+ | true | true | false | true | yes? no? | +-------------------------------------------------+ ... snip ... +-------------------------------------------------+ | false | false | false | false | no | +-------------------------------------------------+ we should apply reset-style-inheritance? or should not apply? Best regards, Takashi Sakamoto
Can you help me understand the question a bit better? For this configuration: [#host]--[SR-4]->[shadow#4] | [SR-3]->[shadow#3] | [SR-2]->[shadow#2] | [SR-1]->[shadow#1] +->[span] The reset-style-inheritance applies at whichever <shadow> element it is set. For example, in this case: [#host]--[SR-4]->[style#a] | | | +->[shadow#4] | | [SR-3]->[style#b] | | | +->[shadow#3] | | [SR-2]->[style#c] | | | +->[shadow#2] | | [SR-1]->[style#d] | | | +->[shadow#1] +->[span] answering the question whether a style from [style#a] inherits to [span] depends on whether there are any reset-inheritance-flags in [SR-3], [SR-2], or [SR-1].
Thank you for comments. (In reply to comment #1) > Can you help me understand the question a bit better? For this configuration: Sure. > > [#host]--[SR-4]->[shadow#4] > | [SR-3]->[shadow#3] > | [SR-2]->[shadow#2] > | [SR-1]->[shadow#1] > +->[span] > > The reset-style-inheritance applies at whichever <shadow> element it is set. I see. SR-4 is the oldest shadow root and SR-1 is the youngest shadow root, I think. > For example, in this case: > > > [#host]--[SR-4]->[style#a] > | | > | +->[shadow#4] > | > | [SR-3]->[style#b] > | | > | +->[shadow#3] > | > | [SR-2]->[style#c] > | | > | +->[shadow#2] > | > | [SR-1]->[style#d] > | | > | +->[shadow#1] > +->[span] > > answering the question whether a style from [style#a] inherits to [span] > depends on whether there are any reset-inheritance-flags in [SR-3], [SR-2], or > [SR-1]. I agree about reset-inheritance-flags of shadow roots. So how do reset-inheritance-flags of insertion points work? c.f. http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-element The following is my understanding: Since [shadow#4] is the oldest shadow root, [span] is distributed to [shadow#4], [shadow#4] is distributed to [shadow#3], .... So I think, distribution is: [span] -> [shadow#4] -> [shadow#3] -> [shadow#2] -> [shadow#1] As the spec says "the styles of the shadow insertion point node are inherited by the child nodes of the shadow root of the shadow DOM subtree, distributed to this shadow insertion point", - [span] inherits the style of [shadow#4]. - [shadow#4] inherits the style of [shadow#3], - [shadow#3] inherits the style of [shadow#2], - [shadow#2] inherits the style of [shadow#1]. Shadow roots and insertion points don't have any styles (because they don't have any renderers). [span] will inherit from the style of the parent node of [shadow#1] (in this case, the style of the shadow host). Whether the style of the shadow host inherits to [span] depends on whether there are any reset-inheritance-flags in [shadow#1], [shadow#2], [shadow#3] and [shadow#4]. Is this correct? Best regards, Takashi Sakamoto
(In reply to comment #2) > Thank you for comments. > > (In reply to comment #1) > > Can you help me understand the question a bit better? For this configuration: > > Sure. > > > > > [#host]--[SR-4]->[shadow#4] > > | [SR-3]->[shadow#3] > > | [SR-2]->[shadow#2] > > | [SR-1]->[shadow#1] > > +->[span] > > > > The reset-style-inheritance applies at whichever <shadow> element it is set. > > I see. > SR-4 is the oldest shadow root and SR-1 is the youngest shadow root, I think. The other way around :) 4 was added last, it's the youngest. > > > For example, in this case: > > > > > > [#host]--[SR-4]->[style#a] > > | | > > | +->[shadow#4] > > | > > | [SR-3]->[style#b] > > | | > > | +->[shadow#3] > > | > > | [SR-2]->[style#c] > > | | > > | +->[shadow#2] > > | > > | [SR-1]->[style#d] > > | | > > | +->[shadow#1] > > +->[span] > > > > answering the question whether a style from [style#a] inherits to [span] > > depends on whether there are any reset-inheritance-flags in [SR-3], [SR-2], or > > [SR-1]. > > I agree about reset-inheritance-flags of shadow roots. > > So how do reset-inheritance-flags of insertion points work? c.f. > http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-element > > The following is my understanding: > > Since [shadow#4] is the oldest shadow root, [span] is distributed to > [shadow#4], > [shadow#4] is distributed to [shadow#3], .... > So I think, distribution is: > > [span] -> [shadow#4] -> [shadow#3] -> [shadow#2] -> [shadow#1] Here's the "as-rendered" tree for you: [#host]--[SR-4]->[style#a] | +->[shadow#4] | +->[SR-3]->[style#b] | +->[shadow#3] | [SR-2]->[style#c] | +->[shadow#2] | [SR-1]->[style#d] | +->[shadow#1] | +->[span] > > As the spec says "the styles of the shadow insertion point node are inherited > by > the child nodes of the shadow root of the shadow DOM subtree, distributed to > this shadow insertion point", > - [span] inherits the style of [shadow#4]. > - [shadow#4] inherits the style of [shadow#3], > - [shadow#3] inherits the style of [shadow#2], > - [shadow#2] inherits the style of [shadow#1]. The numbering is reversed, but yes. > > Shadow roots and insertion points don't have any styles (because they don't > have any renderers). Well, that's not necessarily true. Shadow Root doesn't have any styles, because it's not an Element. However, insertion points are all elements, and they totally could have styles. They are simply not rendered, but they certainly should pass along the styles that are inherited by their contents. This is sort of a whole new plane of thinking though, since we never had anything like this before in CSS. [span] will inherit from the style of the parent node of > [shadow#1] (in this case, the style of the shadow host). > > Whether the style of the shadow host inherits to [span] depends on whether > there are any reset-inheritance-flags in [shadow#1], [shadow#2], [shadow#3] and > [shadow#4]. > > Is this correct? Yes! And I believe there's nothing in either Shadow DOM or CSS specs to suspect otherwise. Please correct me if I am wrong. > > Best regards, > Takashi Sakamoto