Question

我正在使用Polymer 1进行Web开发，但遇到了一些不足的理解。想象一下：

<div class="value">
  <content></content>
</div>

我可以使用.value选择器轻松设置内容的样式。现在，我只想样式化“第一内容”元素。 :first-child等似乎无效。

如何在Polymer中选择<content></content>中的不同元素？

谢谢！

Answer 1

请注意，<content>的<slot>已过时。

要定位<slot> / <content>的第一个孩子，请使用::slotted(:first-child)：

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      foo: {
        type: String,
        value: 'Hello world!'
      }
    }
  });
});

<head>
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo>
    <div>first</div>
    <div>second</div>
    <div>third</div>
  </x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        ::slotted(:first-child) {
          color: red;
        }
      </style>
      <slot></slot>
    </template>
  </dom-module>
</body>

用聚合物1选择第一个<content>元素

1 个答案: