Enhances most built-in elements with a "value" property, which other enhancements use to provide formatting. Adds two-way binding support between this "value" property and a key property, in some cases.
The output element provides an example of a built-in element that "outputs" its value. It's a bit of a strange creature, given that it displays the exact value passed in, but the "value-add" proposition the output element provides may be a bit esoteric (a11y related).
The "value" property this enhancement adds is accessible via oElement.beEnhanced.beValueAdded.value.
The elements be-value-added supports are many of the special elements used by microdata:
Element | Binding property/attribute |
---|---|
a | href/href |
time | datetime/dateTime |
meta | content/content |
data | value/value |
Anyway, the model / precedent that the output element provides seems quite useful, when applied to elements that may do a bit more than simply display the value. In particular, elements that format the value, based on Intl.* settings, or elements that reflect values to metadata attributes (meta, link tags).
<time id=time be-value-added></time>
<data id=data be-value-added></data>
<meta id=meta be-value-added>
<link id=link be-value-added>
...
<script type=module>
import 'be-enhanced/beEnhanced.js';
import '../be-value-added.js';
</script>
<script type=module>
await customElements.whenDefined('be-enhanced');
time.beEnhanced.by.beValueAdded.value = new Date();
data.beEnhanced.by.beValueAdded.value = 13456789;
meta.beEnhanced.by.beValueAdded.value = 'hello';
link.beEnhanced.by.beValueAdded.value = true;
</script>
This will display the date and number in locale string format, and the meta and link tags in a microdata compatible way.
This package contains a base class that helps implement such features in userland using custom enhancements. This package also provide end-user capabilities in its own right.
Note that this does not add or modify the value property onto the enhanced element (top level). It just provides a uniform interface for multiple enhancements, all of which need to:
- Be able to be passed a value
- Reflect that value in some way to an attribute and/or text content of the element.
- Optionally be able to observe the attribute (or text content -- todo) for modifications from other sources, and sync that back up with the value.
Any web server that can serve static files will do, but...
- Install git.
- Do a git clone or a git fork of repository https://github.com/bahrus/be-value-added
- Install node.js
- Open command window to folder where you cloned this repo.
-
npm install
-
npm run serve
- Open http://localhost:3030/demo in a modern browser.
For just the enhancement without attribute support:
import 'be-value-added/be-value-added.js';
For attribute/behivior support as well:
import 'be-value-added/behivior.js';
<script type=module crossorigin=anonymous>
import 'https://esm.run/be-value-added';
</script>