Use ES2015+ syntax #8
Conversation
| this.itemList.children[childrenLength].appendChild(button); | ||
| li.textContent = textInput.value; | ||
| button.classList.add('editable-list-remove-item', 'icon'); | ||
| button.innerHTML = '⊖'; |
There was a problem hiding this comment.
I noticed a bit of an inconsistency here. New list items were added with a different remove icon. Ideally, I like to double back and extract the rendering of the list to a function, so that all items are treated exactly the same.
| removeListItem(e) { | ||
| e.target.parentNode.remove(); | ||
| } | ||
| handleRemoveItemListeners(arrayOfElements) { |
There was a problem hiding this comment.
I was considering a PR to move the handlers from the elements themselves, to the surrounding ul. I think it would reduce the lines of code and complexity of this example pretty significantly.
|
I've checked all your changes, and they seem fine. Thanks @knagurski ! One small ask; these examples are used in many of our web components reference pages — see all of the pages linked from https://developer.mozilla.org/en-US/docs/Web/Web_Components. Could you take a little bit of time, go through a few of these a day, and update the code examples to use your new code? I'd really appreciate that ;-) |
When looking through the examples in MDN, I noticed a few places that I thought might be better served with things like template literals and using
constinstead ofvarandlet. None of the changes included should have any functional impact.