定制聚合物元素< x

本文介绍了定制聚合物元素< x-strong>就像内置的< strong>一样?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何创建类似于内置<strong>的自定义元素(例如<x-strong>)?

How do you create a custom element such as <x-strong> that works like the builtin <strong>?

我已经了解了以下内容:

I've got as far as the following:

<polymer-element name="x-strong" noscript> <template> <style> x-strong { font-weight: bold; } </style> ??? </template> </polymer-element>

HTML:

<x-strong>Hello, <em>Clem</em></x-strong> // Would like this to render exactly the same as <strong>Hello, <em>Clem</em></strong>

但是，这至少有两个问题:

However, this has at least two problems:

我不知道如何获得<x-strong>元素的内容/子元素. (我发现的所有示例都显示了如何访问属性来自定制元素，但不包含其内容.)

出于某些原因，<style>元素中的CSS选择器必须为x-strong-body，html和*均不起作用.

I don't know how to get at the contents/children of the <x-strong> element. (All of the examples I've found show how to access attributes from the custom element, but not its content.)

For some reason the CSS selector within the <style> element needs to be x-strong--body, html and * all don't work.

添加/删除lightdom和noscript属性会以稍微不同的方式修改行为，但是似乎没有任何组合可以复制内置元素.扩展<strong>也不起作用(尽管我实际上想从头开始做一个练习).

Adding/removing the lightdom and noscript attributes modify the behaviour in slightly different ways, but no combination seems to replicate the builtin element. Extending <strong> also doesn't work (although I actually want to do this from scratch, as an exercise).

推荐答案

要将内容从灯光dom渲染到Polymer元素的阴影中，请使用插入点:<content>.同样，要设置宿主元素的样式，可以使用:host选择器.两者都是Shadow DOM的功能.

To render content from the light dom into your Polymer element's shadow use an insertion point: <content>. Also to style the host element, you can use the :host selector. Both are features of Shadow DOM.

<polymer-element name="x-strong" noscript> <template> <style> :host { font-weight: bold; } </style> <content></content> </template> </polymer-element>

演示: jsbin/EqaxOTo/1/edit