Блог

У меня есть два элемента: один является <drop-down> элементом, другой — <populated-drop-down> element. 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>

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

Большая часть сообщества разработчиков хочет эту функцию, но разработчики браузера были обеспокоены созданием проблем с производительностью, поэтому она была исключена из самой последней спецификации.

Я подозреваю, что в скором времени это станет особенностью ShadowDOM, но технически решение еще не принято.