On: Web components will outlive JavaScript frameworks

[spankalee]

    const EditableList = ui.component({
      render: ({ props }) => {
        return `
          <ul>
            ${each(Object.keys(props).filter((p) => p.startsWith('list-item-')), (p) =>
               `<li>${props[p]}</li>`
             )}
          </ul>
        `;
      },
    });

    // Usage:
    ${component(EditableList, {
        ['list-item-0']: 'First item on the list',
        ['list-item-1']: 'Second item on the list',
        ['list-item-2']: 'Third item on the list',
        ['list-item-3']: 'Fourth item on the list',
        ['list-item-4']: 'Fifth item on the list',
    })}

edit: used each(), which doesn't change the point that you can make a bad component API in any framework.

[rglover → spankalee]

https://github.com/cheatcode/joystick#each-and-e

[rglover → spankalee]

Re: your edit, that's not a bad component API, that's bad JavaScript (intentionally written by the author, in this case).

[spankalee → rglover]

This is exactly my point. The MDN element is bad (the component has a bad API), and made bad by the component author, not the web components APIs.

[rglover → spankalee]

Which highlights that there is a lack of clear prescription around how to handle a list in a component at the (Web Components) API level. Contrast that with what I linked from my own framework where there's zero uncertainty as to how to handle a list.