Re: [webcomponents] Custom Components and CSS Regions

On Wed, Dec 5, 2012 at 9:56 AM, Alan Stearns <stearns@adobe.com> wrote:

> There are some similarities between Web Components insertion points and
> CSS Regions. Both facilities allow you to project content from one element
> into another. I'd like to compare the two when used inside custom
> components - why might you use CSS Regions inside a custom component, and
> when should you use an insertion point instead?
>
> If anything in the following analysis is incorrect, please let me know.
>

I only have a passing familiarity with CSS Regions, but I am familiar with
Web Components. I have some comments.


> An insertion point is a <content> element inside a shadow DOM subtree.
>

This is one kind of insertion point. There is a second kind, called
<shadow>, which is used when multiple shadow roots are applied to a given
element to specify how the shadows are merged for rendering.


> These elements can have a select attribute that contains one or more
> selector fragments. When the element with a shadow DOM subtree is
> rendered, its children are distributed to the insertion points in the
> subtree. The first selector match in tree order determines where each
> piece of content is displayed.
>

This is correct, but there is more – how <content> is handled when an
element has multiple shadows, and how selected nodes can be reprojected
through nested shadows.


> A CSS Region displays content that has been redirected to a named flow. A
> declaration of flow-into:<ident> moves content to a named flow, then a
> declaration of flow-from:<ident> with a matching ident creates one or more
> CSS Regions that will display that content.
>
> Insertion Points:
> 1. Content assignment done in HTML
> 2. One-to-one mapping of content to insertion point
>

If you replace /insertion point/ with /content element/ this is right for
the children of a given host element in the context of that host element’s
shadows but not for a document in general. When there are multiple shadows
and reprojection, where a node is presented in the (virtual) flattened tree
can depend on multiple insertion points.


> 3. Content must come from insertion point shadow host
>

This is incorrect in the case of reprojection. Here is a specific example
of reprojection:

<div id="a">
  <div id="b">

{#a's shadow root}
  <div id="c">
    <content select="#b">

{#c's shadow root}
  <div id="d">
    <content>

The virtual tree is

#a
  #c
    #d
      #b

Note how in #c's shadow root, the content is one of #a's children via
reprojection.


> 4. Can assign multiple selectors to a single insertion point
> 5. Cannot chain insertion points together
>

I’m not sure what you mean by “chain”, but reprojection and <shadow> make
two kinds of chaining possible.


> 6. Do not require an ident to collect content for projection
>
> CSS Regions
> 1. Content assignment done in CSS
> 2. One-to-many mapping of content to CSS Regions
> 3. Content can come from anywhere in the document
> 4. Can assign multiple selectors to a named flow
> 5. Can chain CSS Regions to create a fragmentation context
> 6. Need an ident for each named flow
>
> Should use Insertion Points
> 1. For adornments to a single <content> element
>   (component as a wrapper)
> 2. For rearranging a single element's children
>   (breaking news example)
> And I'm sure there are many many more use cases I'm not familiar with.
>
> Should use Regions
> 1. If you need to chain boxes together inside a template
>   (create your own multicol component)
> 2. If you need to chain boxes between templates
>   (custom component as pagination template)
> 3. If you want reassignments via CSS
>   (media queries that target this or that portion of a component)
> 4. If you need to pull content from multiple sources
>   (breaking news from two or more components)
>
> I'm happy to elaborate on the CSS Regions use cases listed here, if my
> terse descriptions are not clear.
>
>
> Thanks,
>
> Alan
>
>
>