be-clonable (⿻)

be-clonable is a web component decorator, that adds or hydrates a triggering button, and enables that button to clone the adorned element.

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

Size of new code in this package:

Vernacular

<label be-clonable>
    <input type="checkbox" name="">
    <span>Check me out</span>
</label>

or, alternatively:

<label ⿻>
    <input type="checkbox" name="">
    <span>Check me out</span>
</label>

In fact, it is a little better from a performance point of view to manually add the button to go along with the attribute, to save the browser or server from having to render it.

<label be-clonable>
    <input type="checkbox" name="">
    <span>Check me out</span>
    <button class="be-clonable-trigger">❏</button>
</label>

The button as well as the event handler can be attached programmatically without the need for the custom attribute, which is useful during template instantiation, for example.

await customElements.whenDefined('be-enhanced');
oLabel.beEnhanced.by.beClonable;

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 http://localhost:8000/demo/dev in a modern browser.

Importing in ES Modules:

import 'be-clonable/be-clonable.js';

Using from CDN:

<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-clonable';
</script>