尝试通过扩展元素填充聚合物元素的 <content></content>答案

【问题标题】：Trying to populate a Polymer Element's <content></content> through an extended element尝试通过扩展元素填充聚合物元素的 <content></content>
【发布时间】：2014-08-24 19:19:09
【问题描述】：

我有两个元素：一个是<drop-down> 元素，另一个是<populated-drop-down> 元素。 populated-drop-down extends drop-down，但是，正如您可能已经猜到的那样，尝试使用一些选项预先填充它。假设我可以简单地将 HTML 放在 <shadow></shadow> 标记内，但这不起作用：

<polymer-element name="drop-down" noscript attributes="label">
  <template>
    <style>
      :host{display:inline-block;border:1px solid;padding:1rem}
      #content{position:absolute}
      #drop, #content {display:none}
      #drop:checked + #content {display:block}
    </style>
    <label for="drop">{{label}}</label>
    <input type="checkbox" id="drop">
    <div id="content"><content></content></div>
  </template>
</polymer-element>


<polymer-element name="pop-drop-down" extends="drop-down" noscript>
  <template>
    <shadow>
      <ul>
         <li>Option1</li>
         <li>Option2</li>
         <li>Option3</li>
         <li>Option4</li>
         <li>Option5</li>
      </ul>
    </shadow>
  </template>
</polymer-element>


<drop-down label="Working DropDown">
      <ul>
         <li>Option1</li>
         <li>Option2</li>
         <li>Option3</li>
         <li>Option4</li>
         <li>Option5</li>
      </ul>
</drop-down>

<pop-drop-down label="Not working pre-populated dropdown">
</pop-drop-down>

(Code also available code on JSBin.)

看来我可以在<shadow></shadow> 周围包裹额外的标签，但不能在<shadow></shadow> 内放置任何标签

【问题讨论】：

标签： javascript html polymer shadow-dom

【解决方案1】：

IIRC，这在 Shadow DOM 规范和 Chrome 的实现中得到了短暂的支持。但是，由于实施问题，它被删除了。

【讨论】：

抱歉，没有看到 Scott 的帖子。无论如何，有一些相关的链接:)

【解决方案2】：

大多数开发者社区都想要这个功能，但浏览器实现者担心会造成性能问题，所以它被排除在最新的规范之外。

我怀疑这将很快成为 ShadowDOM 的一个功能，但从技术上讲，还没有定论。

【讨论】：