Use the power of lit-html from HTML Markup, without imposing any security constraints.
Attribute equivalent of litter-g.
be-alit is a custom element enhancement that provides rendering capabilities based on lit-html. It is one of a family of renderers, based on the common enhancement base class be-render-neutral. Other members include be-preactive.
<ul>
<script nomodule id=pronouns be-alit-vm='["He", "She", "They", "Other"]'>
html `${vm.map(i => html`<li>${i}</li>`)}`;
</script>
</ul>
<script>
setTimeout(() => {
pronouns.beEnhanced.beAlit.vm = ["I", "You", "Us", "Them"];
}, 2000);
</script>This uses the lit-html engine to generate the inner content, namely the list (li) elements.
Editing JSON by hand is a bit error prone. A VS plugin can help with this.
A framework can theoretically pass in the view model:
await whenDefined('be-enhanced');
oScript.beEnhanced.by.beAlit.vm = ["He", "She", "They", "Other"];As suggested above, it is seemingly beyond most frameworks's ability to pass values to the view model in the proscribed way. So be-alit can take over the reigns of binding, and tap into the power of DSS.
<patient-chart>
<template shadowrootmode=open>
<medical-prescriptions
href="prescriptions.json?patient=zero"
enh-be-kvetching>
</medical-prescriptions>
<table>
<thead>
<th>Prescription</th>
<th>Prescriber</th>
<th>Dosage</th>
<th>Frequency</th>
</thead>
<tbody>
<script
nomodule
be-alit-with='~medicalPrescriptions::load'
blow-dry-preserve=renderer blow-dry-remove=siblings>
html`${vm.map(prescription => html`
<tr itemscope=treatment-order .ish=${prescription}>
<td>${prescription.OrderText}</td>
<td>
<button disabled đšī¸=orderItem>Order Item</button>
<div>${prescription.Prescriber}</div>
</td>
<td>${prescription.Dosage}</td>
<td>${prescription.Freq}</td>
</tr>
`)}`;
</script>
</tbody>
</table>
<be-hive></be-hive>
</template>
</patient-chart>blow-dry-preserve and the blowDryRemove processing instructions are completely optional settings, that are utilized by https://github.com/bahrus/xtal-element to take an optimized "snapshot" of a (partly) server-rendered web component, and extract out the things that aren't needed in the template that needs cloning repeatedly.
be-alit is the canonical name of this enhancement. But it is easy as pie to define alternative names. This package provides one such suggestion:
<patient-chart>
<template shadowrootmode=open>
<medical-prescriptions
href="prescriptions.json?patient=zero"
enh-be-kvetching>
</medical-prescriptions>
<table>
<thead>
<th>Prescription</th>
<th>Prescriber</th>
<th>Dosage</th>
<th>Frequency</th>
</thead>
<tbody >
<script nomodule đ-with='~medicalPrescriptions'>
${vm.map(prescription => html`
<tr itemscope=treatment-order .ish=${prescription}>
<td>${prescription.OrderText}</td>
<td>
<button disabled đšī¸=orderItem>Order Item</button>
<div>${prescription.Prescriber}</div>
</td>
<td>${prescription.Dosage}</td>
<td>${prescription.Freq}</td>
</tr>
`)}
`;
</script>
</tbody>
</table>
<be-hive></be-hive>
</template>
</patient-chart>To bind to the patient-chart web component host:
<patient-chart>
<template shadowrootmode=open>
<table>
<thead>
<th>Prescription</th>
<th>Prescriber</th>
<th>Dosage</th>
<th>Frequency</th>
</thead>
<tbody>
<script nomodule đ-with='/prescriptions'>...</script>
</tbody>
</table>
<be-hive></be-hive>
</template>
</patient-chart>Any web server that serves static files with server-side includes will do but...
- Install git.
- Fork/clone this repo.
- Install node.
- Install Python 3 or later.
- 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-alit/be-alit.js';<script type=module crossorigin=anonymous>
import 'https://esm.run/be-alit';
</script>