<x-strong> 像内置一样工作的定制聚合物元件<strong>？

Question

如何创建像内置<strong>一样工作的自定义元素，如<x-strong>？

我已经做到了以下几点：

<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>

然而，这至少有两个问题：

1. 我不知道如何获取<x-strong>元素的内容/子元素。(我发现的所有示例都显示了如何从自定义元素访问属性，但没有显示其内容。)
2. 由于某种原因，<style>元素中的CSS选择器需要是x-strong——body、html和*都不起作用

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

Answer 1

要将内容从灯光dom渲染到Polymer元素的阴影中，请使用插入点：<content>。也可以使用:host选择器来设置主体元素的样式。两者都是Shadow DOM的特性。

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

演示：http://jsbin.com/EqaxOTo/1/edit