Полимер CSS :: селектор содержимого не работает

Question

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

В любом случае, моя проблема заключается в том, что я не могу заставить селектор хоста работать, если я не укажу display: block в своем CSS под: host. Во-вторых, видимо, нет никакой разницы между селекторами «: host» и «: host :: content». Я пытаюсь использовать ТОЛЬКО содержимое стиля, которое вставляется в тег контента без использования элемента оболочки.

Вот мой код из пользовательского-element.html:

<dom-module id="custom-element"> 
    <style> 
     /* Demonstrating how to specify inserted content 

      any content added here is styled 
     */ 
     :host ::content 
     { 
      color: green; 
     } 

     /* This CSS targets the custom-element tag itself */ 
     :host 
     { 
      padding: 4px; 
      background-color: gray; 
     } 
    </style> 
<template> 

    <!-- Title will be placed here before the content --> 
    <h2 id="title">{{title}}</h2> 
    <!-- Any content inside the tag will be placed here --> 
    <content></content> 
</template> 
.... 

А вот соответствующее место, где он используется в index.html:

<!-- Auto-binding templates --> 
    <template id="t" is="dom-bind"> 
     <h1>Your input was <span>{{inputValue}}</span></h1> 
     <br> 
     <input is="iron-input" bind-value="{{inputValue}}"> 
     <input type="button" value="Add to list" onClick="pushItem()"> 

     <ul> 
     <!-- Repeating templates --> 
     <!-- Here, the items attribute specifies the array of items to bind to. --> 
     <template id="repeatingList" is="dom-repeat" items="{{listItems}}"> 
      <!-- This demonstrates that we can find the index and data for every item in the specified array --> 
      <li>Array index <span>{{index}}</span>- <span>{{item}}</span></li> 
     </template> 
     </ul> 
     <br> 
     <custom-element title="{{inputValue}}"><p>Lorem ipsum!</p></custom-element> 
    </template> 

Вот как это выглядит (серый фон не появляется за содержимым элемента, а цвет должен применяться только к тегу содержимого): https://goo.gl/photos/p2EjTSjySCh2srY78

Answer 1

От https://www.polymer-project.org/1.0/docs/devguide/styling.html#styling-distributed-children-content

Вы должны селектор слева от :: контента псевдо-элемента

Answer 2

Ваши теневые стили DOM должен быть внутри тега <template>.

::content не касается непосредственно элемента, и поэтому стили, применяемые непосредственно к нему, будут игнорироваться. Вместо этого он позволяет переопределять стили внутри содержимого.

Итак:

:host { background-color: gray; } /* Styles <custom-element> */ 

:host ::content { color: green; } /* Does nothing */ 

:host ::content > p { color: green; } /* Overrides the <p>Lorem ipsum!</p> to be green */ 

Наконец, обратите внимание, что <custom-element> не имеет стили не по умолчанию на всех своих - он имеет только то, что вы укажете в :host. Для любых визуальных компонентов вы обнаружите, что вам всегда нужно указывать display в :host.