选第一 <content> 含聚合物的元素1

Question

I am using Polymer 1 for web-development and I am encountering a small lack of understanding. 我正在使用Polymer 1进行Web开发，但遇到了一些不足的理解。 Imagine the following: 想象以下情况：

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

I can easily style the content with the .value selector. 我可以使用.value选择器轻松设置内容的样式。 Now I only want to style the First content element. 现在，我只想样式化“第一内容”元素。 :first-child etc. doesn't seem to work. :first-child等似乎无效。

How can I select different elements of my <content></content> in Polymer? 如何在Polymer中选择<content></content>不同元素？

Thanks! 谢谢！

Answer 1

Note that <content> has been deprecated for <slot> . 请注意， <content>已不推荐用于<slot> 。

To target the first child of the <slot> / <content> , use ::slotted(:first-child) : 要定位<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>

选第一 <content> 含聚合物的元素1

问题描述

1 个解决方案

解决方案1
0 2018-09-25 01:53:12

选第一 <content> 含聚合物的元素1

问题描述

1 个解决方案

解决方案1 0 2018-09-25 01:53:12

解决方案1
0 2018-09-25 01:53:12