【发布时间】: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