Polymer share styles across elements

by

As suggested in discussion on issue logged in chromium to deprecate /deep/ and ::shadow selectors:

say your common styles are in a file called

common-style.css

In your component have a style tag that is like this

@import url( ‘/common-style.css’ );

This inverts the control : instead of broadcasting your styles for
anyone to use, style consumers must know which styles they want and
actively request them, which helps avoid conflicts. With browser
caching, there’s essentially no penalty to so many imports, in fact it
is likely faster than cascading the styles through multiple shadow
trees using piercers.

You can create a style.css and import it in your components by putting a css @import in your template.
There won’t be multiple network calls, since browser is going to cache it when your first component loads and for subsequent components it will picked from cache.

We have been using webcomponents in our production apps for a while now using this technique since /deep/ has been deprecated and there has not been any signification performance difference.

More Related Contents:

  1. How to automate shadow DOM elements using selenium?
  2. Override styles in a shadow-root element
  3. jQuery .animate function not responding properly
  4. Hover over image to get a box with multiple links in html/JavaScript
  5. Reloading a single div in an html page [closed]
  6. How do you inject this code into HTML using Javascript?
  7. How to create blog posts with HTML and CSS? [closed]
  8. How to invoke animation when redirection in jsf?
  9. fixing slider on my website [closed]
  10. Restart animation in CSS3: any better way than removing the element?
  11. Simulation background-size: cover in canvas
  12. How to Increase browser zoom level on page load?
  13. How to build simple jQuery image slider with sliding or opacity effect?
  14. Is there a callback on completion of a CSS3 animation?
  15. How to select nth line of text (CSS/JS)
  16. execCommand() is now obsolete, what’s the alternative?
  17. Why element.style always return empty in JS?
  18. How to change a class CSS with a Greasemonkey/Tampermonkey script?
  19. Multicolor Text Highlighting in a Textarea or Text Input
  20. Is there a way to import variables from javascript to sass or vice versa?
  21. Creating a select box with a search option
  22. Passing mouse clicks through an overlaying element
  23. How to resize Twitter Bootstrap modal dynamically based on the content
  24. Retain scrollbar position even after reloading using javascript
  25. Using querySelectorAll(). Is the result returned by the method ordered?
  26. html: hover table column [duplicate]
  27. Get computed value of CSS variable that uses an expression like calc
  28. iOS8 Safari after a pushState the :nth-child() selectors not works
  29. R Shiny DataTable selected row color
  30. Bootstrap Dropdown menu is not working

Leave a Comment