Index: third_party/polymer/components-chromium/core-style/core-style.html |
diff --git a/third_party/polymer/components-chromium/core-style/core-style.html b/third_party/polymer/components-chromium/core-style/core-style.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..cb893b321185f4ca64479ccdcadae4977c0918e2 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-style/core-style.html |
@@ -0,0 +1,104 @@ |
+<!-- |
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+<!-- |
+ |
+The `core-style` element helps manage styling inside other elements and can |
+be used to make themes. The `core-style` element can be either a producer |
+or consumer of styling. If it has its `id` property set, it's a producer. |
+Elements that are producers should include css styling as their text content. |
+If a `core-style` has its `ref` property set, it's a consumer. A `core-style` |
+typically sets its `ref` property to the value of the `id` property of the |
+`core-style` it wants to use. This allows a single producer to be used in |
+multiple places, for example, in many different elements. |
+ |
+It's common to place `core-style` producer elements inside HTMLImports. |
+Remote stylesheets should be included this way, the @import css mechanism is |
+not currently supported. |
+ |
+Here's a basic example: |
+ |
+ <polymer-element name="x-test" noscript> |
+ <template> |
+ <core-style ref="x-test"></core-style> |
+ <content></content> |
+ </template> |
+ </polymer-element> |
+ |
+The `x-test` element above will be styled by any `core-style` elements that have |
+`id` set to `x-test`. These `core-style` producers are separate from the element |
+definition, allowing a user of the element to style it independent of the author's |
+styling. For example: |
+ |
+ <core-style id="x-test"> |
+ :host { |
+ backgound-color: steelblue; |
+ } |
+ </core-style> |
+ |
+The content of the `x-test` `core-style` producer gets included inside the |
+shadowRoot of the `x-test` element. If the content of the `x-test` producer |
+`core-style` changes, all consumers of it are automatically kept in sync. This |
+allows updating styling on the fly. |
+ |
+The `core-style` element also supports bindings and it is the producer |
+`core-style` element is the model for its content. Here's an example: |
+ |
+ <core-style id="x-test"> |
+ :host { |
+ background-color: {{myColor}}; |
+ } |
+ </core-style> |
+ <script> |
+ document._currentScript.ownerDocument.getElementById('x-test').myColor = 'orange'; |
+ </script> |
+ |
+Finally, to facilitate sharing data between `core-style` elements, all |
+`core-style` elements have a `g` property which is set to the global |
+`CoreStyle.g`. Here's an example: |
+ |
+ <core-style id="x-test"> |
+ :host { |
+ background-color: {{g.myColor}}; |
+ } |
+ </core-style> |
+ <script> |
+ CoreStyle.g.myColor = 'tomato'; |
+ </script> |
+ |
+Finally, one `core-style` can be nested inside another. The `core-style` |
+element has a `list` property which is a map of all the `core-style` producers. |
+A `core-style` producer's content is available via its `cssText` property. |
+Putting this together: |
+ |
+ <core-style id="common"> |
+ :host { |
+ font-family: sans-serif; |
+ } |
+ </core-style> |
+ |
+ <core-style id="x-test"> |
+ {{list.common.cssText}} |
+ |
+ :host { |
+ background-color: {{g.myColor}}; |
+ } |
+ </core-style> |
+ |
+ |
+@group Polymer Core Elements |
+@element core-style |
+@homepage github.io |
+--> |
+ |
+<link rel="import" href="../polymer/polymer.html"> |
+ |
+<polymer-element name="core-style" hidden assetpath=""> |
+ |
+</polymer-element> |
+<script src="core-style-extracted.js"></script> |