Polymer 2.0 и несколько слотов

Я хочу построить DOM-дерево пользовательских элементов Polymer 2.0, но я хочу просто заполнить дочерние элементы (слоты) на основе типа тега каждого дочернего элемента, поэтому, когда я пишу HTML для использования своих пользовательских элементов don не хочу написать:

  <group>
    <title slot="title">admins</title>
    <description slot="description">some description</description>
    <users slot="users">
      <user slot="user">
        <name slot="name">Amy</name>
        <dept slot="dept">Widgets</dept>
        <phone slot="phone">1234</phone>
      </user>
      <user slot="user">
        <name slot="name">Bill</name>
        <dept slot="dept">Sprockets</dept>
        <phone slot="phone">5678</phone>
      </user>
      <user slot="user">
        <name slot="name">Chris</name>
        <dept slot="dept">Rachets</dept>
        <phone slot="phone">1357</phone>
      </user>
    </users>
  </group>

Это должно работать с использованием именованных слотов в Polymer 2.0, но вы можете видеть, что это очень громоздко и избыточно, если у вас есть глубокое дерево, где каждый уровень имеет несколько свойств.

Вместо этого я действительно хочу просто написать:

  <group>
    <title>admins</title>
    <description>some description</description>
    <users>
      <user>
        <name>Amy</name>
        <dept>Widgets</dept>
        <phone>1234</phone>
      </user>
      <user>
        <name>Bill</name>
        <dept>Sprockets</dept>
        <phone>5678</phone>
      </user>
      <user>
        <name>Chris</name>
        <dept>Rachets</dept>
        <phone>1357</phone>
      </user>
    </users>
  </group>

который по сути является просто XML. Мне кажется, что с этим намного проще работать, чем с первым примером. Как вы можете видеть из именованных слотов, по мере того, как дерево становится глубже, оно становится очень тесным и грязным.

Итак, мой вопрос: как я могу сделать последний пример в Polymer 2.0? Это вообще возможно? Мне кажется, что это был бы основной вариант использования Polymer, поэтому действительно должен быть способ добиться этого. Ближе всего я нашел эту веб-страницу, но на самом деле она не делает то, что я хочу, потому что вы ограничены одним слотом «по умолчанию» для каждого пользовательского шаблона элемента:

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#slots


person Cat Fingers    schedule 29.05.2017    source источник


Ответы (1)


Я не совсем понимаю, что вы пытаетесь архивировать здесь, вы уверены, что вам действительно не нужен dom-repeat вместо этого? Мне кажется, вы просто хотите перечислить некоторые элементы на основе опубликованного вами XML.

person Ergo    schedule 29.05.2017
comment
Единственным недостатком является то, что вы не можете легко повторять слоты. Вероятно, это то, чего мне больше всего не хватает при использовании Polymer. Вместо шаблона я обычно использую список железа. - person Michael Stramel; 30.05.2017
comment
Я думаю, что я действительно хочу здесь, чтобы иметь возможность устанавливать свойства. Я понимаю, что вы можете сделать это с помощью атрибутов HTML, но на самом деле я хочу установить одно или несколько свойств, которые сами являются пользовательскими элементами и не могут быть представлены с помощью текстовых атрибутов в открывающем теге - вместо этого они должны быть дочерними элементами. Итак, мой вопрос на самом деле больше о том, как я могу отображать несколько различных пользовательских элементов из тегов внутренних элементов HTML в свойства, а затем в теневой DOM. - person Cat Fingers; 30.05.2017
comment
Я все еще не уверен, какова цель slots в этом случае. Какой конечный результат вы хотите сохранить здесь? - person Ergo; 30.05.2017
comment
Взяв в качестве примера узел верхнего уровня, я хочу отобразить «группу» с тремя разными свойствами в разных местах, например. ‹h2›название‹/h2›, ‹p›описание‹p›, а затем список пользователей. И затем для каждого пользователя я хочу сделать то же самое для своих соответствующих полей. Я не уверен, как я могу это сделать (если вообще), используя мой второй пример кода. - person Cat Fingers; 01.06.2017