[css-regions][shadowdom] @region rule and ::distributed() pseudo-element

Hey all,

Region styling and the ::distributed() pseudo-element from Shadow DOM are
accomplishing very similar things. They match elements (or fragments of
elements) that are projected into a container. It would be good to have
these mechanisms match, or even have a single mechanism that applies to
both scenarios.

If I have an insertion point that has a class attribute of 'container' and
there is an element distributed to it with a class attribute of 'content'
then this allows me to style the element:

.container::distributed(.content) {}

If I have a region that has a class attribute of 'container' and its
fragment contains an element with a class attribute of 'content' then this
allows me to style the element (or at least the fragment that falls into
the .container region):

@region .container {
  .content {}
}

We could redefine region styling to use a functional pseudo-element:

.container::region(.content) {}

Or even use ::distributed (or some new name that would fit both
scenarios). Region styling would then just need to define that the styling
applied only to the appropriate fragment of the selected element, and that
only a subset of properties apply when the container is a region.

One drawback to using a functional pseudo-element compared to an @rule is
more typing. If you have more than one selector argument to pass to the
function you have to repeat .container::distributed() for each selector.
With an @rule you can group all of the selector arguments together. Should
we consider making an @distributed rule instead of the pseudo-element?

Thanks,

Alan

Received on Wednesday, 17 April 2013 20:40:21 UTC