be-decked-with

v0.0.3

Published

a month ago

Wrap DOM element inside a template

Downloads

134

0High
0Medium
0Low

bahrus

web-components web-component custom-element custom-elements enhancement behavior

be-decked-with (😶‍🌫️)

Surround the adorned element with content from a common, reusable template.

Specifically, what be-decked-with does is it takes the following HTML:

<template id=myWrappingContent>
    <fieldset>
        <legend>{{dataset.label}}</legend>
        <label>
            <span>{{dataset.label}}</span>
            <slot></slot>
        </label>
    </fieldset>
</template>

...

<select 
    data-label=Country
    be-decked-with=myWrappingContent>
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
    <option value="au">Australia</option>
    <option value="de">Germany</option>
    <option value="fr">France</option>
    <option value="jp">Japan</option>
</select>

and does the following:

Clones the "myWrappingContent" template.
Substitutes in values from the select element properties into the double brace expressions.
Inserts the clone right after the select element.
Moves the select element right after the slot element.
Deletes the slot element.

So the markup above results in:

<fieldset>
    <legend>Country></legend>
    <label>
        <span>Country</span>
        <select 
            data-label=Country
            be-decked-with=myWrappingContent>
            <option value="">Select a country</option>
            <option value="us">United States</option>
            <option value="uk">United Kingdom</option>
            <option value="ca">Canada</option>
            <option value="au">Australia</option>
            <option value="de">Germany</option>
            <option value="fr">France</option>
            <option value="jp">Japan</option>
        </select>
    </label>
</fieldset>

Wouldn't it be better for the server or build process to do this?

Maybe, it depends. If multiple elements need to be wrapped with the same wrapper, it could actually be close to a wash or even a small advantage to do it in the client, which this enhancement supports.

But I think it is quite reasonable to use server and build processes that can also apply this wrapping, based on the same syntax, where it proves more efficacious to do so.

Related enhancements

If what is needed is more complex interspersing / weaving together of templates, consider be-inclusive or be-imbued.

Compact alternative name

It is easy to define alternative names for the attribute. This package contains one such alternative name: 😶‍🌫️:

<select 
    😶‍🌫️=myWrappingContent>
    ...
</select>

[!NOTE] A vscode extension to make navigation from the element adorned by the be-decked-with attribute to the target element is available.

Remote templates

To pull in wrapper from an external html link, this must be mapped via import maps:

<html>
    <head>
        <script type=importmap >
        {
            "imports": {
                "be-decked-with/": "/"
            }
        }
        </script>
    </head>
    <body>
        <select 
            data-label=Country
            😶‍🌫️-src="be-decked-with/demo/template.html">
            <option value="">Select a country</option>
            <option value="us">United States</option>
            <option value="uk">United Kingdom</option>
            <option value="ca">Canada</option>
            <option value="au">Australia</option>
            <option value="de">Germany</option>
            <option value="fr">France</option>
            <option value="jp">Japan</option>
    </select>
    </body>
</html>

[!NOTE] Another vs code extension is available that specializes in supporting the be-decked-with-src/😶‍🌫️-src navigation to the source document.

Support for applying dynamic attributes to the adorned element.

If we place a placeholder inside the slot element whose tag name matches the name of the adorned element, with dynamic attributes, those attributes get applied to to the adorned element.

So for example:

<template id=myWrappingContent>
    <fieldset>
        <legend>{{dataset.label}}</legend>
        <label>
            <span>{{dataset.label}}</span>
            <slot>
                <select aria-label={{dataset.label}}></select>
            </slot>
        </label>
    </fieldset>
</template>

...

<select 
    data-label=Country
    be-decked-with=myWrappingContent>
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
    <option value="au">Australia</option>
    <option value="de">Germany</option>
    <option value="fr">France</option>
    <option value="jp">Japan</option>
</select>

... generates:

<fieldset>
    <legend>Country></legend>
    <label>
        <span>Country</span>
        <select aria-label=Country
            data-label=Country
            be-decked-with=myWrappingContent>
            <option value="">Select a country</option>
            <option value="us">United States</option>
            <option value="uk">United Kingdom</option>
            <option value="ca">Canada</option>
            <option value="au">Australia</option>
            <option value="de">Germany</option>
            <option value="fr">France</option>
            <option value="jp">Japan</option>
        </select>
    </label>
</fieldset>

Viewing Locally

Any web server that serves static files (html, css, js) will do but...

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

Importing in ES Modules:

import 'be-decked-with/be-decked-with.js';

Using from CDN:

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme