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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments