bahrus / be-clonable

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:

Syntax

<label be-clonable>
    <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. For example, during template instantiation, this may be the optimal approach, and is explicitly supported by the trans-render template instantiation library.

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:3030/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>