be-open-and-shut

Automatically close an element that has an "pen" state, after clicking away from the element.

Size of package, including custom element behavior framework (be-enhanced):

Size of new code in this package:

    <menu>
        ...
    </menu>

is shorthand for

    <menu>
        ...
    </menu>

Technically, this only adds the event handler to the global document object when the value of the property doesn't match the value of "toVal", and the event handler is aborted when it matches. This allows for a huge number of open-and-shut elements to be active without burdening the global document object with lots of click handlers (typically only one will be active at any one time).

We are assuming the property "open" has a standard setter which can be subscribed to.

Some components, like the native details element, don't consistently call the "open" property setter when the value of open changes.

To accommodate such components, add an alternative event listener on the adorned element to monitor for:

<details>
    <summary>test</summary>

which is short-hand for:

<details>
    <summary>test</summary>

Hemingway notation [TODO]

<details>
    <summary>test</summary>

There is special logic for the dialog element, which doesn't come close to following this pattern. H/t on the implementation and for making me think about this scenario.

<dialog id="dialog">
        This is the dialog
</dialog>
<button>test</button>

Viewing Locally

1. Install git.
2. Fork/clone this repo.
3. Install node.
4. Open command window to folder where you cloned this repo.
5. > npm install
6. > npm run serve
7. Open https://localhost:3030/demo in a modern browser.

Importing in ES Modules:

import 'be-open-and-shut/be-open-and-shut.js';


## Using from CDN:

```html

```</details></details></details>