Как создать компоненты, которые могут принимать позиционные дочерние элементы в качестве аргументов (Dart)?

Question

Я ищу ресурсы о том, как сделать веб-компоненты, которые могут принимать позиционные аргументы для детей. Что-то вроде:

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

выше элемент будет отображать пролет когда в редактируемых == ложь, и текстовое поле, когда редактируемые == верно. editable - это статическая переменная, наблюдаемая во всем мире.

Я думаю, что можно было бы получить подобное поведение с наследованием. Однако мне было интересно, возможно ли это сделать в описанном выше композиционном стиле. Если компонент (x-editable-component) просто ожидает двух дочерних элементов, один ребенок будет отображаться при редактировании, другой дочерний элемент будет отображаться, когда он не будет выбран.

Чтобы быть ясным, я хочу гибко писать любые два дочерних элемента в виде дочерних элементов x-editable-component, поэтому, возможно, где-то еще дальше. У меня есть x-редактируемый компонент, написанный как таковой.

<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