Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(41)

Unified Diff: third_party/polymer/components-chromium/core-style/core-style.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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 &#64;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>

Powered by Google App Engine
This is Rietveld 408576698