polymer - 在 polymer 中，CSS 如何选择宿主父元素的第一个元素？

Question

假设我有一个 polymer 元件:

<polymer-element name="milo-item" attributes="item" noscript>   <template>
    <style>
      host:first-child {
        color: red;
      }
      host(:first-child) {
        color: red;
      }
      host(:first-child) paper-item::shadow .button-content {
        color: red;
      }
      paper-item::shadow .button-content {
        color: blue;
      }
    </style>

    <paper-item>
      ...
    </paper-item>

  </template>
</polymer-element>

(我添加了额外的 CSS 选择器来指示什么不起作用)

然后我在 div 下创建一堆元素:

<template repeat="{{item in foo}}">
  <milo-item item="{{item}}">
</template>

如何让 CSS 选择器仅应用于主机父项的第一项？

我希望 :host(:first-child) 能够工作，但事实并非如此

Answer 1

首先，:host前面需要冒号.

:host(:first-child)如果宿主元素是其父元素的第一个子元素，则选择宿主元素本身。。括号内的选择器限定宿主元素。例如，:host(.foo)选择<milo-item class="foo"> 。如果您想为列表中的第一个 milo-item 设置样式，请不要再继续了。 (除非将其更改为 :first-of-type 。)

:host :first-child应匹配主机影子树中的第一个子。但是，它与您的影子根中的任何个子项匹配，因此您可能需要 :host > :first-child相反，只匹配第一个顶级子级。因为第一个 child 可能有点奇怪(例如，如果其中有您没有考虑到的不可见元素)，那么使用 :first-of-type 可能会更安全。或:nth-of-type

所以最终答案是如何设计第一个<paper-item> 在你的<milo-item>内的影子 DOM(又名本地 DOM)是:

:host > paper-item:first-of-type

顺便说一下，如果你真的想设计<milo-item>的第一个子级——即 light DOM 中的实际子级——您首先需要添加一个插入点以便渲染它，然后像这样选择它:

:host ::content :first-child

这是一个 jsbin，显示了这些规则的实际应用:

http://jsbin.com/kuqobi/4/edit?html,console,output

希望这有帮助。