@ou-imdt/create/boilerplate/component/lit/checklist.md

Command line tool to create team boilerplate.

# IMDT Component Checklist

Use this checklist to ensure that your component is well designed and follows the IMDT component guidelines.

- [x] Tag name is in kebab-case and begins with `imdt`. See below for an example.

``html
<imdt-wrapper>
    <imdt-carousel>
        <imdt-carousel-slide>
        </imdt-carousel-slide>
    <imdt-carousel>
</imdt-wrapper>
``

- [ ] state is initialized in the constructor.
- [ ] non-reactive props need to be on the class constructor.
- [ ] no naming convention is used for reactive/non-reactive props.
- [ ] use `term` prefix for unslotted text that will rendered, such text should be configurable via reactive properties (not attributes).
- [ ] use underscore for private/internal only methods and props e.g. _foo, _bar.
- [ ] use `this` to access props and methods.
- [ ] use `this` to access state. 
- [ ] component CSS in a separate `[component].css` file. 👌
- [ ] use IMDT component README template and refer to [the template in IMDT-Boilerplate](https://bitbucket.org/lts-imd/boilerplate/src/main/component/)
- [ ] make sure a test file, `[component].test.js` is  included.

## Good practices

### What makes a good component?

- It has a single responsibility.
- It has its own state.
- It has its own lifecycle.
- It has its own template.
- It has a well-defined public API.

### Passing data up and down the tree

- *Properties down*. Setting properties on a subcomponent is usually preferable to calling methods on the subcomponent.
- *Events up*. In the web platform, firing events is the default method for elements to send information up the tree, often in response to user interactions. This lets the host component respond to the event, or transform or re-fire the event for ancestors farther up the tree.