CODEWITHSUNDEEP
javascripthtmlpolymershadow-dom
Keithamus
Keithamus

Reputation: 1849

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>

Upvotes: 4

Views: 331

Answers (2)

ebidel
ebidel

Reputation: 24109

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.

Upvotes: 3

Scott Miles
Scott Miles

Reputation: 11027

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.

Upvotes: 2

Related Questions