Your browser doesn't yet support the new shadow distribution feature. Try Google Chrome Canary, and go to chrome://flags to "Enable Experimental Web Platform Features".

Here's a completely general page-with-toolbar element that provides some basic structure and perhaps some fancy toolbar behavior. This element defines two "slots" that can be filled in by instances and subclasses: a toolbar region, and a main content slot.

Here's an instance of a store-page element that subclasses ("extends") the above page-with-toolbar element. It specializes things just a little bit so the element can be used as the base template for an online store. It partially fills in the toolbar slot with a Home button, and partially fills in the content slot with the store name.

The store-page element above is subclassed itself to create the following product-page element that could be used for the "Products" area of the online store. This completes the toolbar slot with some tools for buying products. It splits the main content slot provided by the base class with two slots: a product name slot, and a redefined main content slot (which will pick up any content not specifically assigned to another slot).

Here's a single instance of the final product-page element above with all slots filled in with details for a specific product.