【问题标题】:Polymer 2.0 and multiple slotsPolymer 2.0 和多个插槽
【发布时间】:2017-10-29 12:48:03
【问题描述】:

我想构建一个 Polymer 2.0 自定义元素 DOM 树,但我只想根据每个子元素的标签类型填充子元素(插槽),所以当我编写 HTML 以使用我的自定义元素时 不想写:

  <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

【问题讨论】:

    标签: polymer polymer-2.x custom-element


    【解决方案1】:

    我不太确定你想在这里归档什么,你确定你不是真的想要dom-repeat 吗?在我看来,您只是想根据您发布的 XML 列出一些元素。

    【讨论】:

    • 唯一的缺点是你不能轻易重复插槽。可能是我在使用 Polymer 时最想念的东西。我倾向于使用 iron-list 代替模板。
    • 我想我在这里真正想要的是能够设置属性。我意识到你可以通过 HTML 属性来做到这一点,但我实际上想设置一个或多个属性,这些属性本身就是自定义元素,并且不能通过开始标记中的文本属性表示 - 它们需要是子元素。所以我的问题实际上更多是关于如何将几个不同的自定义元素从 HTML 内部元素标签映射到属性,然后映射到影子 DOM。
    • 我仍然不确定slots 在这种情况下的目的是什么。您想在这里归档的最终结果是什么?
    • 以顶级节点为例,我想在不同的地方渲染具有3个不同属性的,例如

      title

      description

      ,然后是用户列表。然后对于每个用户,我希望能够为他们各自的领域做同样的事情。我不确定如何使用我的第二个代码示例来做到这一点(如果有的话)。

    猜你喜欢
    • 2018-03-21
    • 1970-01-01
    • 2020-06-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-16
    • 2012-07-04
    • 1970-01-01
    相关资源
    最近更新 更多