decked-out

decked-out provides an html decking layer that can surround and enhance general HTML elements and components.

It makes HTML elements and components customizable, and adds styling and functionality to create rich, interactive experiences.

Sample markup

<script type=importmap >
{
    "imports": {
        "decked-out/": "node_modules/decked-out/"
    }
}
</script>
<script type=module>
    import 'be-decked-with/😶‍🌫️.js';
</script>

<div id=element
    data-label=Example
    😶‍🌫️-src="decked-out/template.html">
    <button>
        <content></content>
    </button>
</div>

Recommended vscode extensions:

json-in-html, custom link attributes, idref