-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1482 from Polymer/0.8-x-style
0.8 x style
- Loading branch information
Showing
19 changed files
with
1,178 additions
and
464 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| <!-- | ||
| @license | ||
| 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 | ||
| --> | ||
| <link rel="import" href="style-util.html"> | ||
| <link rel="import" href="style-transformer.html"> | ||
| <link rel="import" href="style-defaults.html"> | ||
|
|
||
| <!-- | ||
| The `x-style` extension of the native `<style>` element allows defining styles | ||
| in the main document that can take advantage of several special features of | ||
| Polymer's styling system: | ||
| * Document styles defined in an `x-style` will be shimmed to ensure they do | ||
| not leak into local DOM when running on browsers without non-native Shadow DOM. | ||
| * Shadow DOM-specific `/deep/` and `::shadow` combinators will be shimmed on | ||
| browsers without non-native Shadow DOM. | ||
| * Custom properties used by Polymer's experimental shim for cross-scope styling | ||
| may be defined in an `x-style`. | ||
| Example: | ||
| ```html | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <script src="components/webcomponentsjs/webcomponents-lite.js"></script> | ||
| <link rel="import" href="components/polymer/polymer.html"> | ||
| <style is="custom-style"> | ||
| /* Will be prevented from affecting local DOM of Polymer elements */ | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
| /* Can use /deep/ and ::shadow combinators */ | ||
| body /deep/ .my-special-view::shadow #thing-inside { | ||
| background: yellow; | ||
| } | ||
| /* Custom properties that inherit down the document tree may be defined */ | ||
| body { | ||
| --my-toolbar-title-color: green; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| ... | ||
| </body> | ||
| </html> | ||
| ``` | ||
| Note, all features of `custom-style` are available when defining styles as part of Polymer elements (e.g. `<style>` elements within `<dom-module>`'s used for defining Polymer elements. The `custom-style` extension should only be used for defining document styles, outside of a custom element's local DOM. | ||
| --> | ||
|
|
||
| <script> | ||
| (function() { | ||
|
|
||
| var nativeShadow = Polymer.Settings.useNativeShadow; | ||
| var propertyUtils = Polymer.StyleProperties; | ||
|
|
||
| Polymer({ | ||
|
|
||
| is: 'custom-style', | ||
| extends: 'style', | ||
|
|
||
| created: function() { | ||
| this._appliesToDocument = (this.parentNode.localName !== 'dom-module'); | ||
| if (this._appliesToDocument) { | ||
| // used applied element from HTMLImports polyfill or this | ||
| var e = this.__appliedElement || this; | ||
| this.__cssRules = Polymer.StyleUtil.parser.parse(e.textContent); | ||
| propertyUtils.decorateRules(this.__cssRules); | ||
| this._rulesToDefaultProperties(this.__cssRules); | ||
| // NOTE: go async to give a chance to collect properties into | ||
| // the StyleDefaults before applying | ||
| this.async(this._applyStyle); | ||
| } | ||
| }, | ||
|
|
||
| // polyfill this style with root scoping and | ||
| // apply custom properties! | ||
| _applyStyle: function() { | ||
| // used applied element from HTMLImports polyfill or this | ||
| var e = this.__appliedElement || this; | ||
| var props = this._styleProperties = this._computeStyleProperties(); | ||
| var self = this; | ||
| e.textContent = Polymer.StyleUtil.toCssText(this.__cssRules, | ||
| function(rule) { | ||
| // polyfill lack of support for :root | ||
| if (rule.selector === ':root') { | ||
| rule.selector = 'body'; | ||
| } | ||
| var css = rule.cssText = rule.parsedCssText; | ||
| if (rule.properties.consumes) { | ||
| // TODO(sorvell): factor better | ||
| // remove property assignments so next function isn't confused | ||
| css = css.replace(propertyUtils.rx.VAR_ASSIGN, ''); | ||
| // replace with reified properties, scenario is same as mixin | ||
| rule.cssText = propertyUtils.valueForMixin(css, props); | ||
| } | ||
| if (!nativeShadow) { | ||
| Polymer.StyleTransformer.rootRule(rule); | ||
| } | ||
| }); | ||
| }, | ||
|
|
||
| _rulesToDefaultProperties: function(rules) { | ||
| // produce css containing only property assignments. | ||
| Polymer.StyleUtil.forEachStyleRule(rules, function(rule) { | ||
| if (!rule.properties.produces) { | ||
| rule.cssText = ''; | ||
| } | ||
| }); | ||
| // tell parser to emit css that includes properties. | ||
| var cssText = Polymer.StyleUtil.parser.stringify(rules, true); | ||
| if (cssText) { | ||
| Polymer.StyleDefaults.applyCss(cssText); | ||
| } | ||
| } | ||
|
|
||
| }); | ||
|
|
||
| })(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.