https://github.com/oslego/shadow-dom-regions

Experiment to check how regions interact with Shadow DOM
https://github.com/oslego/shadow-dom-regions

Last synced: about 1 month ago
JSON representation

Experiment to check how regions interact with Shadow DOM

• Host: GitHub
• URL: https://github.com/oslego/shadow-dom-regions
• Owner: oslego
• Created: 2012-03-22T21:02:00.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2012-06-21T13:58:25.000Z (over 12 years ago)
• Last Synced: 2024-10-14T12:49:00.119Z (3 months ago)
• Homepage:
• Size: 420 KB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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](http://tools.google.com/dlpage/chromesxs)       

**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](http://jsfiddle.net/dglazkov/eQSZd/)

                                                                               

**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](http://jsfiddle.net/vwmpX/) 

 

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](http://s17.postimage.org/yhccfeswv/expected_result.png)