嘗試通過擴展元素填充Polymer Element的<content> </ content>

Question

我有兩個元素：一個是<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>

（ 代碼也可用JSBin上的代碼 。）

看來我能夠環繞其他標記<shadow></shadow> ，但不得將任何內部<shadow></shadow>

Answer 1

IIRC，這在Shadow DOM規范和Chrome的實現中得到了短暫的支持。 但是，由於實施問題，它已被刪除。

• http://blog.quickui.org/2013/11/08/filling-slots-in-shadow/
• https://groups.google.com/forum/#!msg/polymer-dev/tH9_SMpDbIg/WBfxvY1cfooJ
• https://www.w3.org/Bugs/Public/show_bug.cgi?id=22344

Answer 2

大多數開發人員社區都想要這個功能，但瀏覽器實現者擔心會產生性能問題，所以它被排除在最新的規范之外。

我懷疑這不久就會成為ShadowDOM的一個功能，但從技術上來說，陪審團仍然沒有。