captioned-thumbnail elementThe <captioned-thumbnail> element is meant to mimic a popular item display layout used in Operating Systems like Windows, MacOS, iOS, and Android.
It includes functionality to provide selection status, dispatch selection and editing events, and be manipulated by both pointers and keyboards.
The <captioned-thumbnail> element is strictly visual element, by default. It is not selectable, and does not display sub-elements like a checkbox to indicate selection, or an edit button to allow edit invoking.
In this example, the thumbnail is given no attributes, and no child content.
In this example, the thumbnail has an edit attribute, and the text Editable Item as its child content.
Note that while the item will display an edit button, it is still not selectable.
In this example, the thumbnail has a select attribute, and the text Selectable Item as its child content.
Note that while the item can be selected, it does not display an edit button.
The <captioned-thumbnail> element can be customized in multiple ways, including via attributes, slots, or directly styling its parts.
This example uses a custom icon by providing a valid path to the <captioned-thumbnail> element's src attribute. The example also has text content of smile which is used as the caption text.
In this example, an <svg> element is provided for the icon slot, which replaces the icon with an <svg> element.
To show that dissimilar elements can be used as replacements, in this example:
selected slot has been provided as a <span> element, to replace an <input> element.icon slot has been provided as a <span> element with text content instead of using an image.edit-button slot has been provided as an >button> element with a text label, instead of an icon label.caption slot has been provided as an <input> element instead of a <figcaption> element.The <captioned-thumbnail> element can be dynamically adjusted by using it's attributes.
Use the fields, below, to change the properties of this <captioned-thumbnail> example:
The <captioned-thumbnail> element dispaches change events whenever its selection status changes, and edit events, whenever its edit button is clicked.
In the example, below, each event type is being handled and logged. For more detailed logging, see the console in the dev tools to get the actual event object.
The <captioned-thumbnail> element can be used within other components, but it is expected that the element will be composed - including its slots - by the implementing component.
Any slots passed down through <slot> elements can only be manipulated by forwarding the expected slots in the shadow dom of the parent component.
To demonstrate this, note that the first entry does not pass any slots, and appears regularly. The second passes slots for the label and edit button. The third example passes in the icon slot. Each of these examples only work because they are being handled by the <shadow-wrapper-container> and <shadow-wrapper> elements, during the slotchange events.
Note that the actual slotted elements, themselves, need to be added to a default <slot> element in the wrapper container. This is due to the slot attribute being set, on each element, effectively making them invisible to the default slot in the wrapper container. To work around this, all subslot elements are added to a <slot> element, which is then handled by the wrapper element to assign the slots appropriately for the <captioned-thumbnail> element.
events, unlike slots, work just fine with nesting. This is demonstrated by each component still triggering events simply by listening to the example element, showing that even deeply nested events still bubble through to the light DOM.