时间戳

首页 > 解决方案 > 选择第一个聚合物元素 1

javascript - 选择第一个聚合物元素 1

问题描述

我正在使用 Polymer 1 进行 Web 开发，但我遇到了一点点缺乏理解。想象一下：

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

我可以使用选择器轻松设置内容样式.value。现在我只想设置第一个内容元素的样式。:first-child等似乎不起作用。

如何选择我<content></content>的 in Polymer 的不同元素？

谢谢！

标签： javascripthtmlcsspolymer

解决方案

请注意，<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>

推荐阅读