4

我正在寻找有关如何制作可以采用位置子参数的 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) 只需要两个子组件，一个子组件在可编辑时显示，另一个子组件在不可编辑时显示。

需要明确的是，我希望灵活地将任何两个孩子编写为 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>

这可能吗？

4

1 回答 1

6

这听起来对<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

于 2013-04-09T22:50:22.367 回答