Question

如何创建自定义元素，例如<x-strong>，其作用类似于内置<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>

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

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

添加/删除lightdom和noscript属性会以稍微不同的方式修改行为，但似乎没有组合复制内置元素。扩展<strong>也不起作用（虽然我实际上想从头开始这样做，作为练习）。

Answer 1

要将灯光dom中的内容渲染到Polymer元素的阴影中，请使用insertion point：<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

定制聚合物元素<x-strong>，其作用类似于内置<strong>？</strong> </x-strong>

1 个答案: