| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
| 6 Code distributed by Google as part of the polymer project is also | |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
| 8 --><!-- | |
| 9 | |
| 10 The `core-style` element helps manage styling inside other elements and can | |
| 11 be used to make themes. The `core-style` element can be either a producer | |
| 12 or consumer of styling. If it has its `id` property set, it's a producer. | |
| 13 Elements that are producers should include css styling as their text content. | |
| 14 If a `core-style` has its `ref` property set, it's a consumer. A `core-style` | |
| 15 typically sets its `ref` property to the value of the `id` property of the | |
| 16 `core-style` it wants to use. This allows a single producer to be used in | |
| 17 multiple places, for example, in many different elements. | |
| 18 | |
| 19 It's common to place `core-style` producer elements inside HTMLImports. | |
| 20 Remote stylesheets should be included this way, the @import css mechanism is | |
| 21 not currently supported. | |
| 22 | |
| 23 Here's a basic example: | |
| 24 | |
| 25 <polymer-element name="x-test" noscript> | |
| 26 <template> | |
| 27 <core-style ref="x-test"></core-style> | |
| 28 <content></content> | |
| 29 </template> | |
| 30 </polymer-element> | |
| 31 | |
| 32 The `x-test` element above will be styled by any `core-style` elements that have | |
| 33 `id` set to `x-test`. These `core-style` producers are separate from the element | |
| 34 definition, allowing a user of the element to style it independent of the author
's | |
| 35 styling. For example: | |
| 36 | |
| 37 <core-style id="x-test"> | |
| 38 :host { | |
| 39 backgound-color: steelblue; | |
| 40 } | |
| 41 </core-style> | |
| 42 | |
| 43 The content of the `x-test` `core-style` producer gets included inside the | |
| 44 shadowRoot of the `x-test` element. If the content of the `x-test` producer | |
| 45 `core-style` changes, all consumers of it are automatically kept in sync. This | |
| 46 allows updating styling on the fly. | |
| 47 | |
| 48 The `core-style` element also supports bindings, in which case the producer | |
| 49 `core-style` element is the model. Here's an example: | |
| 50 | |
| 51 <core-style id="x-test"> | |
| 52 :host { | |
| 53 background-color: {{myColor}}; | |
| 54 } | |
| 55 </core-style> | |
| 56 <script> | |
| 57 document._currentScript.ownerDocument.getElementById('x-test').myColor = '
orange'; | |
| 58 </script> | |
| 59 | |
| 60 Finally, to facilitate sharing data between `core-style` elements, all | |
| 61 `core-style` elements have a `g` property which is set to the global | |
| 62 `CoreStyle.g`. Here's an example: | |
| 63 | |
| 64 <core-style id="x-test"> | |
| 65 :host { | |
| 66 background-color: {{g.myColor}}; | |
| 67 } | |
| 68 </core-style> | |
| 69 <script> | |
| 70 CoreStyle.g.myColor = 'tomato'; | |
| 71 </script> | |
| 72 | |
| 73 Finally, one `core-style` can be nested inside another. The `core-style` | |
| 74 element has a `list` property which is a map of all the `core-style` producers. | |
| 75 A `core-style` producer's content is available via its `cssText` property. | |
| 76 Putting this together: | |
| 77 | |
| 78 <core-style id="common"> | |
| 79 :host { | |
| 80 font-family: sans-serif; | |
| 81 } | |
| 82 </core-style> | |
| 83 | |
| 84 <core-style id="x-test"> | |
| 85 {{list.common.cssText}} | |
| 86 | |
| 87 :host { | |
| 88 background-color: {{g.myColor}}; | |
| 89 } | |
| 90 </core-style> | |
| 91 | |
| 92 | |
| 93 @group Polymer Core Elements | |
| 94 @element core-style | |
| 95 @homepage github.io | |
| 96 --><html><head><link rel="import" href="../polymer/polymer.html"> | |
| 97 | |
| 98 </head><body><polymer-element name="core-style" hidden="" assetpath=""> | |
| 99 | |
| 100 </polymer-element> | |
| 101 <script charset="utf-8" src="core-style-extracted.js"></script></body></html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1215543002:
Remove Polymer 0.5. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master