Bootstrap not working in Polymer

[pvseshu]

Currently I am working on polymer 1.0 and using bootstrap, all the styles are working as expected. But if I converted application as shadow DOM by using below code, any of bootstrap styles are not working. On very high level if I imported any css files, those are not working if I enable shadow DOM in polymer. Can you please suggest me any possible way to import css files.

        window.Polymer = window.Polymer || {};
        window.Polymer.dom = 'shadow';

[nazar-pc]

It is expected, since regular styles do not penetrate into Shadow DOM. So naturally it should not work.
So yes, you can forget about Bootstrap and friends under Shadow DOM.
For using under Shadow DOM you have to use elements that are designed to work fine there. You can use elements from here at start: https://elements.polymer-project.org/
Also I have some set of own elements and you can find some other third party elements like Strand as well. But some part of them you'll need to develop yourself, no way to avoid this in long term (in short term you can use hack with /deep/, but it will break at some point anyway, so consider it as temporary solution only).

Eventually Shadow DOM is designed to get rid of Bootstrap and the likes in terms of global styling in favor of styling precisely things you need where you need them and have some degree of confidence that it wouldn't break.

[ebidel]

See #514