[webcomponents] Custom Components and CSS Regions

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.

An insertion point is a <content> element inside a shadow DOM subtree.
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.

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
3. Content must come from insertion point shadow host
4. Can assign multiple selectors to a single insertion point
5. Cannot chain insertion points together
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

Received on Wednesday, 5 December 2012 00:56:53 UTC