This is an old revision of the document!
With regions, element (or pseudo-element) boxes are often broken into multiple pieces that are laid out in different regions. For example, it is possible to move an element and its generated box with width:100% to a named flow and lay out the named flow between two regions, one of width 500px and one of width 200px. In that situation, the specified width for the element is 100% and its used value for the portion laid out in the first region is 500px and the used value for the portion laid out in the second region is 200px.
So there is a notion of per-fragment used style.
In addition, regions have a notion of style that applies only to the fragments of an element that fall into a particular region. A way to think about this is to consider that the selectors in the @region style rules apply only to the pseudo-elements representing the fragment of the element that falls in a particular region.
For example:
@region #myDiv { h2 { color: red; } }
can be interpreted as specifying an additional property for the:
h2::in-region(regionA)
pseudo-element, where the '::in-region(<region-name>)' pseudo-element selects the fragment of 'h2' that fits into '<region-name>'.
This assumes that we are able to identify regions uniquely and uniformly (i.e., no matter whether they are elements or not). Note the pseudo-element syntax uses an identifier and the @region rule uses an id selector).
For the sake of the discussion, let's assume we are using a 'region-name' property to set a region identity. For example:
#myDiv { region-name: regionA; }
If we follow that model, the used style for the content falling into a particular region could be retrieved as:
var myDiv = document.getElementById('myDiv'); window.getComputedStyle(myDiv,'::in-region(regionA)');
The issues with the current @region rule are:
Modify the region styling syntax to be consistent with existing 'fragment' selectors:
#myDiv { region-name: regionA; } h2::in-region(regionA) { color: red; }
window.getComputedStyle(elem, "::before::in-region(regionA)");
According to the Selectors Level 3 specification:
Note that pseudo-elements are restricted to one per selector and occur only in the last simple_selector_sequence.
which seems to prevent the combination of a '::before' pseudo-element selector with another '::in-region()' pseudo selector.