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>`