Skip to content

v1.6.0
Compare
Choose a tag to compare
@kevinpschaaf kevinpschaaf released this 29 Jun 22:51
· 6886 commits to master since this release
v1.6.0
8715c83

New Features

  • Added support for native custom CSS properties.

    To use, set lazyRegister: true and useNativeCSSProperties: true in Polymer settings (e.g. <script> Polymer = {lazyRegister: true, useNativeCSSProperties: true};</script> before importing polymer.html).

    Enabling the feature only impacts browsers that support native custom CSS properties (Chrome and Firefox; Safari 9+ supports custom properties, but is buggy and thus opted out for now). On these browsers, normal custom CSS properties such as --custom-property: value will use native properties; custom CSS mixins such as --custom-mixin: { ... } and their @apply points of usage will be destructured into individual custom properties once at registration time such that native properties are used for all custom properties. This eliminates all instance time work related to the custom property shim, which should provide substantial performance gains.

    Caveats: When native custom properties are in use, Polymer's updateStyles(...) API is supported with one exception: calling updateStyles to change the value of custom CSS mixins is not supported.

  • Integrated support for polymer-css-build

    The CSS build performs Shady DOM CSS selector shimming as well as destructuring custom CSS mixins to individual properties, which can help eliminate all runtime cost of Shady DOM style shimming, as well as all runtime cost of custom property shimming (on browsers with native CSS properties). Achieving optimal results may require selectively serving different built CSS depending on client capabilities. See that repo for details on how to run the build.

  • Added support for defining CSS custom properties in @media queries

    The following use of CSS custom properties inside @media rules is now supported, allowing for dynamic change of custom property values based on screen size, etc.:

    <style>
  @media (max-width: 400px) {
    :host {
      --gutter-width: 16px;
    }
  }    
</style>

Meaningful Changes

  • The custom property shim will now correctly re-calculate custom property style values when global <style is="custom-style"> elements are loaded async (e.g. via use of lazy-loading).
  • importHref() will now ensure lazily-loaded element definitions result in tree-order upgrades when using polyfill, which should result in more deterministic behavior when using lazy-loading patterns.
  • observers/computed functions will always receive the current value of a property, which addresses errors due to potentially stale values that can occur when a property value is changed synchronously in its own observer.

Raw Notes

  • Fix test to account for pseudo element differences x-browser. (commit)
  • Restore functionality of selectors like :host(.foo)::after. (commit)
  • add comment. (commit)
  • re-support selectors like :host[inline] since this was previously supported under shady-dom. (commit)
  • fix linting (commit)
  • Add test for not matching x-foox-bar given :host(x-bar) used inside x-foo (commit)
  • fix test in IE/FF. (commit)
  • simplify :host fixup (commit)
  • Fixes #3739: correctly shim :host(.element-name) as element-name.element-name. (commit)
  • Fixes #3734: address HI/CE timing issue in importHref. Fixes upgrade time dependencies of scripts on previous elements in async imports. (commit)
  • Ensure element scope selectors are updated correctly when updateStyles is called when element is not in dom. (commit)
  • add comment. (commit)
  • remove unneeded flag. (commit)
  • Fixes #3730 and inspired by (#3585) (commit)
  • custom-style triggers updateStyles if root scope (StyleDefaults) has style properties when the custom-style is created. (commit)
  • Fix _patchMatchesEffect. (#3631) (commit)
  • Fixes #3555. Ensure selectors including ::content without a prefix … (#3721) (commit)
  • Fixes #3530. When updateStyles is called and an element is not attached, invalidate its styling so that when it is attached, its custom properties will be updated. (commit)
  • Make sure effect functions receive latest values (commit)
  • [ci skip] data binding edge case smoke test (commit)
  • Use whenReady to apply custom styles. (commit)
  • Use firefox 46 for testing (commit)
  • Need to wait until render to test. (commit)
  • address feedback (commit)
  • Fix lint, use query params instead of duplicate file. (commit)
  • Ensure custom styles updated after adding custom-style async. Fixes #3705. (commit)
  • Store cacheablility on the scope (commit)
  • fix decorateStyles with custom-style (commit)
  • Do not scope cache elements with media rules, :host(), or :host-context() selectors (commit)
  • Support preventDefault() on touch (#3693) (commit)
  • Shim CSS Mixins in terms of CSS Custom Properties (#3587) (commit)
  • [ci skip] update changelog (commit)
Assets 2
Loading