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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -