Demo of CSS Regions working with Shadow DOM

This experiment shows how CSS Regions interact with Shadow DOM.

It works if you see two boxes with text and green borders. When you resize the browser window the text should flow from one box to another.

Be sure you're using a browser supporting Shadow DOM and CSS Regions.

There should be no <div class="region"> elements under <div id="shadow-host"> .

How it works

The content of the <article> tag is associated with the named flow called 'myFlow'. A shadow root is created under <div id="shadow-host"> and two regions that consume from the 'myFlow' named flow are appended to it.

By default shadow root child nodes are not affected by styles declared outside the shadow DOM tree. This means that the regions don't render content from the named flow which is declared outside.

Switching the boolean applyAuthorStyles flag on the shadow root to 'true' changes the behavior. This means that styles defined outside are inherited by the regions nested under the shadow root.