Polymer: Is it impossible to apply an external css library like boostrap globally in version 2.0?

Created on 1 May 2017  路  3Comments  路  Source: Polymer/polymer

I am using polymer1.x. Polymer is the best !! I am working on a migration after version 2.0 is released this time. However, I found out that the css library (semantic ui) that is loaded as a link does not apply globally.
So I reviewed the 2.0 version of the document, tried to search it, and I tried everything and found that it was impossible to apply. Is it really impossible? If I do not apply the external css library like boostrap globally, I will not be able to go to 2.0.
I would like a detailed answer.

Most helpful comment

Global styles are controversal to the web components approach. You still can to create a shared style module, put your CSS there and reuse it via <style include="shared-styles">, but I would revommend to split those styles across components, e. g. button should keep its styles encapsulated, and then you will instanciate it using custom element, not <div class="btn">.

All 3 comments

Global styles are controversal to the web components approach. You still can to create a shared style module, put your CSS there and reuse it via <style include="shared-styles">, but I would revommend to split those styles across components, e. g. button should keep its styles encapsulated, and then you will instanciate it using custom element, not <div class="btn">.

What you are probably seeing is Polymer 2.0 transitioning to use ShadowDOM by default.
Given that ShadowDOM provides an encapsulation mechanism for styling, your global stylesheet is no longer able to deeply apply styling.

If you absolutely need to use your global style, you can add a script to your application with window.ShadyDOM = {force: true} before webcomponents-lite.js

However, I would advise that you reconsider your use of global stylesheets, as forcing ShadyDOM incurs a performance and code size penalty for your users.

Also, as @web-padawan pointed out, if you can split your use of your styling library in such a way as it can be applied only to the elements that need it, that would be the best scenario.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

abdonrd picture abdonrd  路  4Comments

microo8 picture microo8  路  4Comments

nazar-pc picture nazar-pc  路  4Comments

mbana picture mbana  路  3Comments

limonte picture limonte  路  3Comments