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

Question

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

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

上面的元素将在可编辑 == false 时显示一个跨度，在可编辑 == true 时显示一个文本区域。 editable 是一个全局观察的静态变量。

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

需要明确的是，我希望灵活地将任何两个 child 编写为 x-editable-component 的 child ，所以也许在更远的地方我有一个这样编写的 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>

这里我使用类，但你可以想出任何你想要的协议(protocol)。 <content select="">可以使用大多数 CSS 选择器。

这将像这样使用:

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

有关“内容”的更多信息，请访问 web-ui article或者您可以查看 shadowdom spec 中的示例.

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