Geek Answers Handbook

How to create components that can accept positional children as arguments (Dart)?

I am looking for resources on how to make web components that can take positional child arguments. Sort of:

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

The above element will display the interval when it is editable == false and the text field when edited == true. editable is a static variable observed around the world.

I think one could get similar behavior with inheritance. However, I was wondering if this could be done in the compositional style described above. If the component (x-editable-component) just expects two children, one child will be displayed during editing, the other child will be displayed when it is not selected.

To be clear, I want to flexibly write any two children as x-editable-component children, so maybe somewhere else below. I have an x-editable component written as such.

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

Is it possible?

+4
source share
1 answer

This sounds great for the <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>

I use classes here, but you can find any protocol you need. <content select=""> can use most CSS selectors.

It will be used as:

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

More information about the "content" can be found in the ui web page or you can see an example in the shadowdom specification .

Please note: I use display: none instead of <template if> to bypass https://github.com/dart-lang/web-ui/issues/228

+6
source

More articles:


All Articles