[css3-regions] Event handling on regions

Hello,

CSS regions act only as a visual containers for rendering content.

In most cases, regions and content nodes that flow into them belong to
different node trees. Regions do not act as 'parentNode' to their content
nodes. Because of this, events triggered on the content nodes do not
bubble to the regions.

This prevents regions from reacting to events such as click, touch, drag,
etc.

The regions CSSOM provides 'getRegionsByContent()'[1] as a method to help
identify the region where a content node renders. However, it is possible
and likely that the method will return a sequence of regions if the
content node is split across multiple regions.

It is necessary to identify the exact region where an event took place to
cover basic use cases:
- Highlight a region on click / mouseover
- Drag a region across the page

There at least two possible approaches to fix this issue:

Option 1: 
Inject the region's object reference into the capture and bubble phases
for events triggered on content nodes that render inside the region. None
of the region's ancestors in the DOM would be injected.

The event path for a click might look like this:
(capture) document -> body -> content node parent -> REGION -> content node
(target) content node
(bubble) content-node -> REGION -> content node parent -> body -> document


Option 2: 
Do not inject the region in the regular event paths. Dispatch a separate
event on the named flow [2] that the region belongs to. The two events are
interlaced:

Let NFE be the event dispatched on the named flow.

(capture NFE) Named flow - > region
(capture) document -> body -> content node parent -> content node
(target) content node
(bubble) content node -> content node parent -> body -> document
(bubble NFE) region -> Named flow

Either option should consider the complexities:
- nested regions: regions might render inside other regions.
- non-DOM elements as regions: pseudo-elements, grid cells, page slots.
Both options require that these containers have a corresponding CSS Object
Model.

I expect Option 1 to be more intuitive for developers. Option 2 does not
alter the DOM event paths and helps mitigate the issue of regions not
being DOM elements.

What are your thoughts on these approaches to enable event handling on
regions?

[1] 
http://dev.w3.org/csswg/css3-regions/#dom-named-flow-get-regions-by-content
[2] http://dev.w3.org/csswg/css3-regions/#the-namedflow-interface

+Razvan

Received on Monday, 12 November 2012 07:25:38 UTC