Выбор первого элемента <content>с полимером 1 - PullRequest
Новая
       4

Выбор первого элемента <content>с полимером 1

0 голосов
/ 13 сентября 2018

Я использую Polymer 1 для веб-разработки и столкнулся с небольшим отсутствием понимания. Представьте себе следующее: 

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

Я могу легко стилизовать содержимое с помощью селектора .value. Теперь я хочу только стилизовать первый элемент контента. :first-child и т. Д., Похоже, не работает.

Как я могу выбрать различные элементы моего <content></content> в Polymer?

Спасибо!

1 Ответ

0 голосов
/ 25 сентября 2018

Обратите внимание, что <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>
...