task-board elementThe <task-board> element provides a layout and expected scroll management for <task-list> elements. It can be targeted to handle <task-list> and <task-card> events, and it includes a header and footer as a convenience, but it is mostly a wrapper/container element that arranges <task-list>s for common use-cases.
The <task-board> element provides a layout for <task-list> elements. This includes a header and footer, as well as a horizontally-scrolling section for the lists.
Because every <task-list> and <task-card> element each dispatch their associated events - and because each of those events bubble - the <task-board> element, itself, does not need to dispatch any events. Even without native events, the <task-board> element can still be targeted for listening to any of the <task-list> element's events, or <task-card> element's events.
The <task-card>s can be moved between lists by setting the drag-drop attribute for each <task-list> element that allows the drag-and-drop feature.
In this example, each <task-list> element has a drag-drop attribute, and events are being handled when the add event is dispatched from a <task-list> element, or a removeevent is dispatched from a <task-card> element. Also, each list that contains a nested list has its add button hidden and the drag-drop attribute ommitted, to prevent any tasks from being assigned to a <task-list> that has nested <task-list>s.
To prevent <task-card> elements from being dragged and dropped onto <task-board> elements that they did not originate from, use the <task-list> element's dragAndDropQueryParent or parentScopeSelector properties.
In this example, each list in each board has its scope limited to prevent dragging between boards.
Styling can be done on the <task-board> element, and its child <task-list> and <task-card> elements, with direct css selectors.
Styling the shadowDOM elements in any of these custom elements can be done using the respective part attributes.
In the example below, the same <task-board> content from the basic example has been styled with customized designs for the board, lists, and tasks: