javascript - Polymer share styles across elements -
i need share styles across multiple polymer elements. acceptable create "styles.html" file , import different elements or start have performance implications app grows? know 0.5 there core-styles kind of seems unnecessary if imports work well.
styles.html
<style> button { background: red; } </style>
my-button.html
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../styles/main-styles.html"> <link rel="import" href="../behaviors/mixins.html"> <dom-module id="my-button"> <template> <button>{{text}}</button> </template> </dom-module> <script> polymer({ is: 'my-button', behaviors: [buttonbehavior] }) </script>
as suggested in discussion on issue logged in chromium deprecate /deep/ , ::shadow selectors:
say common styles in file called
common-style.css
in component have style tag this
@import url( '/common-style.css' );
this inverts control : instead of broadcasting styles use, style consumers must know styles want , actively request them, helps avoid conflicts. browser caching, there's no penalty many imports, in fact faster cascading styles through multiple shadow trees using piercers.
you can create style.css , import in components putting css @import in template. there won't multiple network calls, since browser going cache when first component loads , subsequent components picked cache.
we have been using webcomponents in our production apps while using technique since /deep/ has been deprecated , there has not been signification performance difference.
Comments
Post a Comment