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>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.
If what is needed is more complex interspersing / weaving together of templates, consider be-inclusive or be-imbued.
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.
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.
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>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.
import 'be-decked-with/be-decked-with.js';<script type=module crossorigin=anonymous>
import 'https://esm.run/be-decked-with';
</script>