Estou usando o polímero1.x. Polímero é o melhor!! Estou trabalhando em uma migração após o lançamento da versão 2.0 desta vez. No entanto, descobri que a biblioteca css (semântica ui) que é carregada como um link não se aplica globalmente.
Então revisei a versão 2.0 do documento, tentei pesquisá-la, tentei de tudo e descobri que era impossível aplicar. É realmente impossível? Se eu não aplicar a biblioteca CSS externa como boostrap globalmente, não poderei ir para 2.0.
gostaria de uma resposta detalhada.
Estilos globais são controversos à abordagem de componentes da web. Você ainda pode criar um módulo de estilo compartilhado, colocar seu CSS lá e reutilizá-lo via <style include="shared-styles">
, mas eu recomendaria dividir esses estilos entre os componentes, por exemplo, o botão deve manter seus estilos encapsulados e, em seguida, você o instanciará usando elemento personalizado, não <div class="btn">
.
O que você provavelmente está vendo é a transição do Polymer 2.0 para usar o ShadowDOM por padrão.
Dado que o ShadowDOM fornece um mecanismo de encapsulamento para estilo, sua folha de estilo global não é mais capaz de aplicar estilos profundamente.
Se você realmente precisar usar seu estilo global, poderá adicionar um script ao seu aplicativo com window.ShadyDOM = {force: true}
antes webcomponents-lite.js
No entanto, aconselho que você reconsidere o uso de folhas de estilo globais, pois forçar o ShadyDOM incorre em uma penalidade de desempenho e tamanho de código para seus usuários.
Além disso, como @web-padawan apontou, se você puder dividir o uso de sua biblioteca de estilos de forma que possa ser aplicada apenas aos elementos que precisam, esse seria o melhor cenário.
Comentários muito úteis
Estilos globais são controversos à abordagem de componentes da web. Você ainda pode criar um módulo de estilo compartilhado, colocar seu CSS lá e reutilizá-lo via
<style include="shared-styles">
, mas eu recomendaria dividir esses estilos entre os componentes, por exemplo, o botão deve manter seus estilos encapsulados e, em seguida, você o instanciará usando elemento personalizado, não<div class="btn">
.