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

Any web server that serves static files with server-side includes will do but...

1. Install git
2. Fork/clone this repo
3. Install node.js
4. Open command window to folder where you cloned this repo

5. git submodule add https://github.com/bahrus/types.git types

6. git submodule update --init --recursive

7. npm install

8. npm run serve

9. Open http://localhost:8000/demo/ 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>