Полимер: Содержание вложенности содержимого

Question

<!-- my-poly --> 
<template> 
    <content select=".useBtn"> 
    <button id="defaultBtn"> 
     <content select=".useBtnIcon"> 
     Button 
     </content> 
    </button> 
    </content> 
</template> 

Так что, если мой элемент будет использоваться, Пользователь может ввести кнопку, которая будет отображаться вместо defaultBtn. Но если никакая кнопка не указана, будет отображаться defaultBtn с текстом кнопки. Но пользователь также должен иметь опцию для использования defaultBtn и для ввода текста или значка, который будет отображаться на кнопке.

Если я использую <div class="useBtn"></div>, он будет использоваться в качестве кнопки. Но <div class="useBtnIcon"> BtnText</div>, похоже, не работает. Есть ли способ сделать эту работу?

Answer 1

Согласно спецификации, он не собирается работать.

http://www.w3.org/TR/shadow-dom/#content-insertion-points

Содержание элемент, который удовлетворяет всем из следующих условий представляет собой точку вставки содержимого:

• Корневой узел элемента контента является тенью корня
• Существует нет другого элемента контента в предках элемента контента
• Отсутствует теневой элемент в предках элемента контента

Имея это в виду, я думаю, вы не можете сделать эту вещь работу с nestetd элементами контента.

Этот будет работать. Пользовательский значок выигрывает, если оба применяются

<polymer-element name="the-button"> 
    <template> 

     <content id="contentButton" select=".useBtn"> 
      <button id="PREFIXEDdefaultBtn"> 
       Default Button 
      </button> 
     </content> 

     <button id="defaultBtnWithCustomIcon"> 
      <!--be sure that this content element doesnt contain a default set --> 
      <content id="contentIcon" select=".useBtnIcon"></content> 
     </button> 

    </template> 

    <script> 
     Polymer('the-button', { 
      domReady: function() { 
       var customIcon = this.$.contentIcon; 

       var disNodes = customIcon.getDistributedNodes(); 
       //Test if the content element contains distributed nodes. 
       if (disNodes.length !== 0) { 
        this.$.contentButton.remove(); 
       } else { 
        // the button is customized, remove the icon 
        this.$.defaultBtnWithCustomIcon.remove(); 
       } 
      } 
     }); 
    </script> 
</polymer-element> 

Answer 2

Я уверен, что ваш внутренний элемент <content> очищается, когда внешний элемент <content> выбирает его содержимое.

Answer 3

Можете ли вы предоставить jsfiddle или plnkr или что-нибудь еще для этого? Полимер импортирует так много вещей, трудно решить проблему без собственного проекта.

Не имея источник побеспокоить снимай это, это звучит, как вы, возможно, потребуется добавить атрибуты, чтобы позволить пользователям изменять предпочтения в пределах вашего элемента в <polymer-element> тег:

<polymer-element name="my-element" attributes="defaultBtn inputBtn">

Смотрите здесь: https://www.polymer-project.org/docs/polymer/polymer.html#declarative-event-mapping

Это должно позволить пользователям настраивать свой пользовательский элемент. Еще раз, не имея кода для возиться, не уверен, что это будет работать для вашей ситуации?