如何创建可以将位置子项作为参数的组件(Dart)？

Question

我正在寻找有关如何制作可以采用位置子参数的webcomponents的资源.就像是:

<x-editable-component>
  <span>{{value}}</span> // this could be any uneditable element
  <textarea>{{value}}</textarea> //could be any editable element
</x-editable-component>

上面的元素在editable == false时显示跨度,在editable == true时显示textarea.editable是一个全局监视的静态变量.

我认为有可能通过继承来获得这种组合行为.但是,我想知道是否有可能以上面提到的可组合方式执行此操作.组件(x-editable-component)只需要两个子节点,一个子节点在可编辑时显示,另一个子节点在不可编辑时显示.

为了清楚起见,我希望能够灵活地将任意两个孩子写成x-editable-component的子代,所以也许在某个地方我可以编写一个x-editable组件.

<x-editable-component>
  <div>{{value}}</div> // this could be any uneditable element
  <input>{{value}}</input> //could be any editable element
</x-editable-component>

这可能吗？

Answer 1

这听起来像是<content>标签的一个很好的用途.

<element name="my-editable-component">
  <template>
    <div style="display: {{editing ? 'block' : 'none'}}">
      <content select=".editing"></content>
    </div>
    <div style="display: {{editing ? 'none' : 'block'}}">
      <content select=".normal"></content>
    </div>
  </template>
  <script type="application/dart">
    class MyEditableComponent extends WebComponent {
      bool editing = false;
      // ...
    }
  </script>
</element>

在这里,我正在使用课程,但你可以提出你想要的任何协议.<content select="">可以使用大多数CSS选择器.

这将用作:

<my-editable-component>
  <div class="normal">{{value}}</div>
  <input class="editing">{{value}}</input>
</my-editable-component>

有关"内容"的更多信息可以在web-ui文章中找到,或者您可以在shadowdom规范中看到该示例.

请注意:我正在使用display: none而不是<template if>解决方法https://github.com/dart-lang/web-ui/issues/228