如何创建类似于内置<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:
添加/删除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
更多推荐
定制聚合物元素< x
发布评论