定制聚合物元素< 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:

1. 我不知道如何获得<x-strong>元素的内容/子元素. (我发现的所有示例都显示了如何访问属性来自定制元素，但不包含其内容.)
2. 出于某些原因，<style>元素中的CSS选择器必须为x-strong-body，html和*均不起作用.

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.

添加/删除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>

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

这篇关于定制聚合物元素< x-strong>就像内置的< strong>一样?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！