This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
At a recent discussion, it was proposed that the @host rule would be much more powerful if it could match the host's tree rather than only the host node. The @host rule would match only the host element or one of its descendants. The rule would apply in the scope of the host element. This would allow matching the host element based on some ancestor match. The :scope pseudo-selector would be used to reference the host element itself. For example: @host { /* match host elements with an ancestor matching .foo */ .foo :scope { ... } } Issue: The host itself may be inside a shadowDOM. It would be nice to allow some way to specify rules that can reach to the global css scope. This would allow for shadowDOM styling based on some master theme selector, for example. In addition, the @host rule could function as a short-hand method (in lieu of ::distributed) for targeting any distributed content. For example, @host { /* match any distributed nodes */ :scope > * { ... } /* match .bar distributed nodes if the host matches .foo */ .foo:scope > .bar { ... } }
I remember that there was also a discussion about ::light() pseudo-element function? Can you add some details on that?
I would like to confirm whether the following should work or not, because an old @host @-rules depends on insertion points. <div id="host"> #shadow-root <style> @host { div::x-my-pseudo { color: blue } } </style> <div pseudo="x-my-pseudo">Hello</div> </div> If a new @host @-rules also depends on insertion points, "Hello"'s color is not blue, because the #shadow-root has neither <content> nor <shadow>.
(In reply to comment #2) > I would like to confirm whether the following should work or not, because an > old @host @-rules depends on insertion points. > > > <div id="host"> > #shadow-root > <style> > @host { div::x-my-pseudo { color: blue } } > </style> > <div pseudo="x-my-pseudo">Hello</div> > </div> > > If a new @host @-rules also depends on insertion points, "Hello"'s color is > not blue, because the #shadow-root has neither <content> nor <shadow>. The @host @-rule should work, because the shadow tree is not inert. ... I found a bug of @host @-rules.
I think a nice summary of this proposal is here: <http://lists.w3.org/Archives/Public/public-webapps/2013JanMar/0661.html> There were no responses on public-webapps at that time. FWIW I think this is a good idea from a web developer ergonomics point of view. I have a question about the proposed semantics in the case of nested shadows: Are @host rules applied to the host's DOM, or to that DOM with distribution done to its insertion points? For example, given this: <div id="a"> <div id="b">x</div> </div> <template id="t"> <!-- will be applied to #a --> <div id="c"> <content></content> </div> </template> <template id="u"> <!-- will be applied to #c --> <style> @host { #b { color: green; } } </style> <content></content> </template> <script> // Add a ShadowRoot to #a populated with #t var root = document.querySelector('#a').createShadowRoot(); root.appendChild(document.querySelector('#t').content); // Add a ShadowRoot to #c populated with #u root.querySelector('#c').createShadowRoot() .appendChild(document.querySelector('#u').content); </script> In this case, does the "x" appear in green or not? My fear is that, based on the same rationale behind reprojection, the selectors should be run on the result of distribution. But unlike the select attribute, @host rules have access to the full power of CSS selectors. That will make doing a high-performance implementation more difficult.
*** This bug has been marked as a duplicate of bug 22390 ***