Полимер, отключенный стиль веб-компонента

В последнее время я просматривал Polymer, однако столкнулся с проблемами, когда хотел изменить стиль disabled состояние элемента <paper-button> из обычной таблицы стилей.

<paper-button disabled="disabled" ...>
    #shadow-root
        <script>
            :host {...}
            :host([disabled]) {
                ...I want to be able to overwrite styling here...
            }

Кто-нибудь может помочь, пожалуйста? Я пробовал различные заклинания ::shadow, но я просто бился головой о кирпичную стену :>

Спасибо.


css web-component polymer
person Dene B    schedule 13.10.2014    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вне определения элемента вы не ссылаетесь на этот элемент с помощью :host, вместо этого ссылаетесь на него по имени его тега.

<script src='//www.polymer-project.org/components/platform/platform.js'></script>
<link rel='import' href='//www.polymer-project.org/components/paper-button/paper-button.html'>
<style>
  paper-button[disabled] {
    border: 5px dotted rgba(100, 100, 100, 0.2);
  }
</style>
<paper-button disabled>Can't click me!</paper-button>

person Peter Burns    schedule 14.10.2014
comment
Спасибо, Питер и @Winchestro, я был нубом :). Я особенно смотрел на стиль фона и пропустил !важный :‹ Пометка ответа Питера как принятого, так как он был первым. - person Dene B; 14.10.2014

arrow_upward
2
arrow_downward

Я думаю, вы неправильно поняли селектор :host. Он выбирает сам элемент, а не содержимое в теневом корне. Чтобы перезаписать его, все, что вам нужно сделать, это... просто стилизовать кнопку точно так же, как если бы вы делали это с помощью обычного HTMLElement :)

<style>
    paper-button {

    }
    paper-button[disabled]{
        ..overwrite styling here...
    }
<style>
person Winchestro    schedule 14.10.2014