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 article找到，或者您可以在shadowdom spec中看到该示例。

请注意：我正在使用display: none代替<template if>来解决https://github.com/dart-lang/web-ui/issues/228

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

1 个答案: