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:
<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, which is useful during template instantiation, for example.
await customElements.whenDefined('be-enhanced');
oLabel.beEnhanced.by.beClonable;
- Install git.
- Fork/clone this repo.
- Install node.
- Open command window to folder where you cloned this repo.
-
npm install
-
npm run serve
- Open http://localhost:3030/demo/dev in a modern browser.
import 'be-clonable/be-clonable.js';
<script type=module crossorigin=anonymous>
import 'https://esm.run/be-clonable';
</script>