如何創建可以將位置子項作爲參數的組件（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> 

上述元素將在可編輯的顯示範圍時== false和一個文本編輯時，真正的==。可編輯的是一個全局監視的靜態變量。

我認爲有可能通過繼承來獲得這種組合行爲。但是，我想知道是否有可能以上述可組合的方式做到這一點。組件（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