task-card elementThe <task-card> element is a collection of a text-like input, a checkbox input, a color input, and a remove button, arranged for the purpose of listing them as tasks to be "completed".
The element provides access to the inputs via the attributes, and dispatches events when the inputs change or the remove button is invoked.
The <task-card> element's description can be set by using the value attribute.
Each of the three inputs on the <task-card> element can be set via an attribute.
In this example, the element's value attribute is set to "Hello World":
Each of the <task-card> element's child inputs dispatch their own events and those events can be handled with common addEventListener() calls.
For convenience, the <task-card> element, itself, also dispatches the following events:
changeremoveThe change event fires when any of the child inputs have their values updated. The remove event fires when the remove button is clicked.
In the following example, events are attached to both the <task-card> element and its child elements, to show the contrast. Attaching to one or the other is the reccommended practice.
The <task-card> element's description input can be replaced by providing an element for the description slot.
("slotting" is done by setting an element's slot attribute to the matching slot name. In this case, that slot name is "description")
In this example, the <task-card> element has a child <textarea> element which has its slot attribute set to description:
The <task-card> element has multiple input elements in its shadow DOM which are available via querying the element's shadowRoot reference.
Due to the private nature of the shadowRoot, best practices reccommend a helper function to access these managed inputs.
The <task-card> element provides the findPart(partName) helper function which will find any element in the shadowRoot which has a part attribute value that matches the provided string parameter.