Custom Polymer element <x-strong> that works like the builtin <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:

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

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

来源：https://stackoverflow.com/questions/21376947/custom-polymer-element-x-strong-that-works-like-the-builtin-strong