定制聚合物元素 <x-strong> 像内置函数那样工作<strong>？</strong>

Question

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:

1. 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.)
2. For some reason the CSS selector within the <style> element needs to be x-strong -- body , html and * all don't work.

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

Answer 1

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>

Demo: http://jsbin.com/EqaxOTo/1/edit