EditableList's attribute-based approach makes for a confusing example

[justinfagnani]

Taking list items as individual items is a pretty awkward API that people are using as an example of why web components have a bad API. It's a poor argument - you can make a similar component API in any framework - but there's no reason IMO to design a component this way. It would be far more ergonomic to take a list of items as a property, a JSON array as an attributes, and/or a list of child elements.

[bsmth]

Thanks for reporting. Is the suggestion to do something like this?

<editable-list
    title="TODO"
    items='["one", "two", "three"]'
    ...
></editable-list>

To help anyone reading through / investigating:

• demo: https://mdn.github.io/web-components-examples/editable-list/
• example src: https://github.com/mdn/web-components-examples/tree/main/editable-list

[matkat99]

I had a similar experience to the comment above. I ended up rebuilding this example as a demo with a class and we ended up taking this approach:

<editable-list >
      <h2 slot="title">Todo</h2>
      <list-item>First!</list-item>
      <list-item>Second!</list-item>
      <list-item>Third!</list-item>
      <label slot="label">Add a new List Item</label>
</editable-list>

In an HTML element the contents come in as children...I think it makes a lot more sense this way. I have the rest of the code for the working example if you are interested. It probably needs more polish, and maybe some simplification. We also had a talk about CSS and Shadow DOM, not sure if you want that as part of this...but here is a link. https://github.com/matkat99/examples/tree/main/wc-editable-list