Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating page templates by filling a shadow</title>
​
<script src="http://polymer-project.org/polymer/polymer.min.js"></script>
​
<polymer-element name="page-with-toolbar">
<template>
  <style>
  :host {
    border: 1px solid gray;
    display: block;
    height: 400px;
    width: 300px;
  }
  #toolbar {
    background: #ddd;
    padding: 0.5em;
  }
  #page {
    padding: 0.5em;
  }
  </style>
  <div id="toolbar">
    <content select=".toolbar">
      <div class="slot">(Toolbar slot)</div>
    </content>
  </div>
  <div id="page">
    <content>
      <div class="slot">(Main content slot)</div>
    </content>
  </div>
</template>
<script>
Polymer( "page-with-toolbar", {
  applyAuthorStyles: true
});
</script>
</polymer-element>
​
<polymer-element name="store-page" extends="page-with-toolbar" noscript>
<template>
  <style>
  h1 {
    font-size: 1em;
  }
  </style>
  <shadow>
    <span class="toolbar">
      <button>Home</button>
      <content select=".toolbar">
        <span class="slot">(New toolbar slot)</span>
      </content>
    </span>
    <div id="page">
      <h1>FantasticGizmos.com</h1>
      <content>
        <div class="slot">
          (New main content slot)
        </div>
      </content>
    </div>
  </shadow>
</template>
</polymer-element>
​
<polymer-element name="product-page" extends="store-page" noscript>
<template>
  <style>
  button {
  }
  </style>
  <shadow>
    <span class="toolbar">
      <button>Add to cart</button>
      <button>Buy now</button>
    </span>
    <h2>
      <content select=".productName"></content>
    </h2>
    <content></content>
  </shadow>
</template>
</polymer-element>
​
<style>
body,
button,
input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
}
​
body {
  margin: 0.5in;
}
​
p {
  max-width: 800px;
}
​
.slot {
  border: 2px dotted gray;
  box-sizing: border-box;
  color: #666;
  padding: .25em;
}
​
.shadowDistributionEnabled {
  display: none;
}
</style>
​
<script>
// Check to see whether the browser supports the new shadow distribution feature.
function isShadowDistributionEnabled() {
  var host = document.createElement( "div" );
  var child = document.createElement( "div" );
  host.appendChild( child );
  var shadowRoot = host.createShadowRoot();
  var shadow = document.createElement( "shadow" );
  shadowRoot.appendChild( shadow );
  return ( child.getDestinationInsertionPoints().length === 0 );
}
​
window.addEventListener( "load", function() {
  var message = document.querySelector( "#legacyMessage" );
  message.classList.toggle( "shadowDistributionEnabled", isShadowDistributionEnabled() );
});
</script>
​
</head>
​
<body>
  <p id="legacyMessage" style="color: red;">
    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".
  </p>
  <p>
    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.
  </p>
  <page-with-toolbar></page-with-toolbar>
  <p>
    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.    
  </p>
  <store-page></store-page>
  <p>
    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).
  </p>
  <product-page>
    <div class="productName slot">
      (Slot for product name)
    </div>
    <div class="slot">
      (New main content slot)
    </div>
  </product-page>
  <p>
    Here's a single instance of the final product-page element above with all
    slots filled in with details for a specific product.
  </p>
  <product-page>
    <div class="productName">Gizmo</div>
    Here are some details about the Gizmo product.
  </product-page>
</body>
​
</head>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Jan_Miksovskypro
0viewers