The editable-list element

Overview

The <editable-list> element is meant to allow users to remove arbitrary dom elements in a simple-to-define scope.

It also provides conveniences for editing and adding new elements, without actually implementing functionality to achieve that.

The <editable-list> element is also unstyled and is expected to be used as a "building block"-style component.

Basic Example

A simple <editable-list> with no customizations
  • A
  • B
  • C
  • D
    •

    Hide Remove Button

    In this example, the <editable-list>'s remove attribute is set to false, which hides the remove buttons.

  • A
  • B
  • C
  • D
    •

    Include Edit Button

    In this example, the <editable-list>'s edit attribute is set to true, which includes an edit button that dispatches edit events, when clicked.

  • A
  • B
  • C
  • D
    •

    Replace Remove Button with Edit Button

    In this example, the <editable-list>'s remove attribute is set to false and its edit attribute is set to true which has the effect of "replacing" the remove button.

    This example is mainly here to show why you would ever want to hide the "remove" button on a list that has default functionality to remove items. In the case where you just need editing, the remove button can be hidden while showing other useful buttons like "add" and "edit".

  • A
  • B
  • C
  • D
    •

    Custom Add Button

    In this example, the <editable-list> has been given a child with a slot attribute of add, which replaces the default add button with that child.

    Note how this example's add button says the word "Add", rather than using the default "plus" (+) symbol.

  • A
  • B
  • C
  • D
    •

    Custom Remove/Edit Button

    In this example, the <editable-list> has been given two <template> children with part attributes set to remove-button and edit-button.

    These templates set the internal content of the "remove" and "edit" buttons, respectively. Note how they each contain words to describe their function, rather than symbols.

    The content for these buttons is set using a <template>, rather than a <slot>, because a slot is a singular area replacement, whereas these buttons will need to be added to each child of the <editable-list> element.

  • A
  • B
  • C
  • D
    •

    Events

    In this example, the <editable-list> events are being handled and logged to the Event Log, below.

    For the third item, the event's preventDefault() function is invoked, which stops the remove event's default functionality of removing the item.

  • A
  • B
  • This item cannot be removed
  • D
    •
    Event Log

      Styled

      In this example, the <editable-list> has had each of its parts styled (hideously) to show how each can be referenced by CSS for custom styling.

    • A
    • B
    • C
    • D
      •