Как переопределить родительский стиль при расширении полимерного элемента

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

<polymer-element name="polymer-cool">
  <template>
    <style>
        :host #p {
            color: red;
        }    
    </style>
    You are <span id='p'>{{praise}}</span> <content></content>!
  </template>
  ...
</polymer-element>

но измените это в расширении этого элемента:

<polymer-element name="polymer-cooler" extends="polymer-cool">
  <template>
    <!-- A shadow element render's the extended
         element's shadow dom here. -->
    <style>
        #p {
            color: blue;
        }
    </style>
    <shadow></shadow> <!-- "You are cool Matt" -->
  </template>
  ...
</polymer-element>

Вы можете видеть в JSfiddle ниже, что я не смог изменить цвет span#p. Я пробовал несколько других вещей, таких как

polymer-cooler #p {
    color: blue;
}

И попытался поместить стиль внутри тегов, но не повезло. Надеюсь, что это возможно, и я просто что-то упускаю.

http://jsfiddle.net/jamstooks/tpyL9/


css polymer
person jamstooks    schedule 21.07.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Что ж, похоже, это работает. Я хотел бы получить некоторые разъяснения от кого-то о том, является ли это лучшим способом сделать это:

<polymer-element name="polymer-cooler" extends="polymer-cool">
  <template>
    <style>
         {
            :host::shadow #p
            color: blue;
        }
    </style>  
    <shadow></shadow>
  </template>
  ...
</polymer-element>

http://jsfiddle.net/jamstooks/tpyL9/4/

РЕДАКТИРОВАНИЕ: 22.07.14

Согласно комментарию Скотта ниже, я обновил приведенный выше код с :host /deep/ #p до :host::shadow #p.

person jamstooks    schedule 21.07.2014
comment
:host::shadow #p является предпочтительным синтаксисом. /deep/ будет проникать в теневой дом подэлемента, что, вероятно, не то, что вам нужно. - person Scott Miles; 21.07.2014
comment
Спасибо, Скотт. Да, это определенно не то, что я хочу, и имеет больше смысла. - person jamstooks; 23.07.2014