task-list elementThe <task-list> element provides features and events for managing a list of "task" items.
"Tasks" are represented by <task-card> elements, by default, but can be any element type.
The <task-list> element dispatches events when changes occur and can provide drag-and-drop functionality for its items.
The <task-list> element's color, name, and description can all be adjusted either in the document, or using the element's attribtues.
Add <task-card> elements to a <task-card> element using static HTML, or by injecting the element dynamically with javascript.
In this example, the <task-list>'s add event is being handled to add new tasks. Each task is also having its remove event handled to extract the element from the DOM:
"Drag and Drop" functionality can be enabled on any <task-list> element by setting the drag-drop attribute (does not require a value).
When using the drag and drop functionality, the lists will need to query for other list items that are available as potential siblings for the list item that is being dragged. To do this, the <task-list> element queries on a parent container. By default, this is the document's <body> element, but it can be set to any element that contains all of the <task-list>s you want to enable dragging and dropping for.
You can see a demonstration of this by dragging an item from this "Drag and Drop" example, down to the "Events" example below, or vice versa.
By contrast, dragging and dropping does not work correctly between the "Nested" example and any other example, because the "Nested" example explicitly limits the parent scope.
In this example, the <task-list>s each have a drag-drop attribute, and so any of their items can be mixed and matched by dragging them. Note that the attribute is the only requirement; no additional javascript is needed to handle the drag and drop features:
The <task-list> element dispatches a change event whenever it is changed. This includes when the properties, like name or color, change as well as when the list's items change order.
When the "Add" button is clicked, the <task-list> will dispatch and add event.
When the list's collapsed state changes, like when the button toggles it, the collapsed event will be dispatched.
If a <task-list> element is added as a child to another <task-list> element, the top-level <task-list> element will dispatch a nested event.
If the drag and drop feature is enabled, the <task-list> element will dispatch an added event whenever an item is dragged into the list, and a removed event whenever an item is dropped in a different list than it was dragged from.
In this example, each event fired by the <task-list> element is listened for and the event's data is logged out to the event log, below:
A <task-list> element can be used as a child of another <task-list> element which is described here as "nesting".
Due to the default behavior of a child element to be rendered in the "items" slot (default slot), the nested <task-list> element would appear above the "Add" button, but below the other items in the list.
The placement of a nested <task-list> element in the items list may cause confusions because at the end of the nested lists, there would be multiple "Add" buttons, each corresponding to a nesting level.
To circumvent that issue, nested <task-list> elements can set their slot attributes to footer, which will cause them to render below the "Add" button in the parent list, as seen in the example below.
In this example, each of the <task-list> elements have drag and drop enabled, but they are scoped to only the lists in this example:
The <task-list> element uses the shadow DOM for its layout, but it's elements can still be styled by using the ::part() selector.
To demonstrate, the example below shows the default "collapse" behavior of hiding the items being re-styled to collapse the list horizontally, with an animation: