This is an experiment to hilight how CSS Regions interact with Shadow DOM.

updated June 2012

• ShadowRoot now implements applyAuthorStyles flag

• workaround using scoped styles no longer required

This experiment works in a Webkit-enabled browser with Shadow DOM and CSS Regions enabled.

At the time of this writing Google Chrome Dev channel and Google Chrome Canary builds have Shadow DOM and CSS Regions support.

Download Google Chrome Canary

How to enable Shadow DOM in Google Chrome

• type about:flags into the address bar of the browser;

• find the "Enable Shadow DOM" flag and toggle it on;

• restart the browser;

• test if Shadow DOM works

How to enable CSS Regions in Google Chrome

• type about:flags into the address bar of the browser;

• find the "Enable CSS Regions" flag and toggle it on;

• restart the browser;

• test if CSS Regions work

You should see two green border boxes with text flowing between them when the browser window is resized.

Screenshot of expected result