Experiment to check how regions interact with Shadow DOM
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Lessons-learned.md
README.md
expected-result.png
index.html

README.md

CSS Regions in Shadow DOM

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

Requirements

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

Expected result

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

Screenshot of expected result

CSS Regions and Shadow DOM in Google Chrome