是否可以在轻型DOM中声明插槽名称？

Question

在shadow DOM v0中,开发人员不需要了解如何将light DOM内容放置在组件的阴影dom中的内部实现.

V0的规格相匹配的内置组件的当前行为像<select>和<option>在消费者不关心我在那里特别是它们的元素内容将被放置.相反,shadow DOM会自动选取与标记select属性中指定的选择器匹配的元素,<content>并将它们放在阴影树内的正确位置.消耗开发人员的代码需要较少的样板.

在v1中,您需要具体了解插槽名称.模仿前面提到的相同示例<select>,我需要使用类似<option slot="option">插槽属性值指定放置当前元素的位置的内容.我也可以添加那些不打算包含在那个插槽中的元素<table slot="option">.

总之,我的担忧是:

1. 每次我使用web组件时都需要指定额外的信息
2. 能够将无效元素添加到错误的阴影DOM位置,并导致不可预测的副作用

在阴影DOM v1中有一种方法可以获得<content select="option"></content>孩子必须匹配特定选择器的旧行为,还是被丢弃？如果没有,有谁知道为什么特别是这么大的突破性改变？

例1(v0规范)

的index.html

<my-component>
    <my-child-component>Text</my-child-component>
    <wrong-child-component>Wrong</wrong-child-component>
</my-component>

component.html(shadow DOM)

<div>
    <content select="my-child-component"></component>
</div>

结果DOM

<my-component>
    #shadow-root
        <div>
            <my-child-component>Text</my-child-component>
        </div>
<my-component>

例2(v1规范)

的index.html

<my-component>
    <my-child-component slot="child-slot">Text</my-child>
    <wrong-child-component slot="child-slot">Wrong</wrong-child-component>
</my-component>

component.html(shadow DOM)

<div>
    <slot name="child-slot"></slot>
</div>

结果DOM

<my-component>
    #shadow-root
        <div>
            <my-child-component>Text</my-child-component>
            <wrong-child-component>Wrong</wrong-child-component>
        </div>
<my-component>

Answer 1

因为v1没有其他替代品slot（据我所知）。但我仍然没有看到问题所在。就像content您也可以使用无名插槽一样。

这是Polymer 2.0 迁移指南的示例

<!-- element template -->
<dom-module id="my-el">
  <template>
   ...
   <h2>
     <slot name="title"></slot>
   </h2>
   <div>
     <slot></slot>
   </div>
 </template>
</dom-module>

...
<!-- usage -->
<my-el>
   <span slot="title">Mr. Darcy</span>
   <span>Fun at parties.</span>
</my-el>

这是github 上的讨论之一，讨论建议使用 slot over content，并仅列出 slot over content 的一些优点

默认插槽与默认插入点。在 v0 中，默认插入点（没有 select 属性的插入点）会消耗与前一个插入点不匹配的所有节点。在 v1 中，默认槽（没有名称属性的槽）仅匹配没有槽属性的内容。换句话说，具有槽属性的节点永远不会分配到默认槽。

尽管它相对于内容也没有什么缺点，但至少现在供应商已经同意老虎机是前进的方向。