Как предотвратить внешний CSS от переопределения стилей веб-компонентов

Question

У меня есть пользовательский элемент Polymer, который я хочу стилизовать определенным образом и предоставить в качестве плагина на множество разных веб-сайтов. Я хотел бы иметь возможность инкапсулировать стили моих пользовательских компонентов таким образом, чтобы они выглядели одинаково на всех веб-сайтах, на которых они встроены. Вот пример того, как директива шрифта на веб-странице родительского конфликтует со стилем моего компонента:

<style> 
 
* { 
 
    font-size: 18px; 
 
} 
 
</style> 
 
<script src="http://www.polymer-project.org/webcomponents.js"></script> 
 
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> 
 

 
<polymer-element name="polymer-css-test"> 
 
    <template> 
 
    <style> 
 
     :host { 
 
     font-size: 12px; 
 
     } 
 
    </style> 
 
    <div> 
 
     Please tell me how to make this 12pt. 
 
    </div> 
 
    </template> 
 
    <script> 
 
    Polymer('polymer-css-test', { 
 
     ready: function() { 
 
     } 
 
    }); 
 
    </script> 
 
</polymer-element> 
 
<polymer-css-test></polymer-css-test>

Заранее спасибо за вашу помощь.

Answer 1

Существует два способа достижения этого (и вы можете использовать оба).

Если вы хотите, чтобы ваши правила стилей, чтобы применить здесь, что вам нужно, чтобы сделать их более конкретными, чем «глобальные» правила:

:host * { 
    font-size: 12px; 
} 

Кроме того, вы можете добавить !important маркер правило, чтобы сделать его переопределение другие правила, однако это следует использовать с осторожностью:

:host { 
    font-size: 12px!important; 
} 

для получения дополнительной информации о специфичности (какие правила применяются к которым элементы), контроль this page.