简体   繁体   中英

Trying to populate a Polymer Element's <content></content> through an extended element

I have two elements: one is a <drop-down> element, the other is a <populated-drop-down> element. populated-drop-down extends drop-down , but, as you may have guessed, tries to pre-populate it with some options. The assumption was that I could simply put HTML inside the <shadow></shadow> tag, but this does not work:

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

It seems I am able to wrap additional tags around <shadow></shadow> but not place any inside of <shadow></shadow>

IIRC, this was supported for a brief period of time in the Shadow DOM spec and Chrome's implementation. However, it was removed due to implementation concerns.

Most of the developer community wants this feature, but the browser implementors were concerned about creating a performance problem, so it was left out of the most recent spec.

I suspect this will be a feature of ShadowDOM before long, but technically the jury is still out.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM