Scriptlet - embed-page demo

In context of embed-page the scripltet is a script tag acting as inline component. It uses script tag attributes as parameters, is aware of DOM where it is located, and modifies the surrounding DOM tree if desired.

Samples of scriptlets

You could think of scriptlet as light-weighted web component which does not require a separate dependency inclusion as content would be used in location of SCRIPT tag.

For example, number-format.js scriptlet bellow would render <span>1,234,567,890</span> right before own SCRIPT tag. Scriptlet change-bind.js would change value of number-format scriptlet on change event of following input field.

Of course the binding within JS framework is shorter. But this scriptlet will run with HTML without writing any JS, keeping all in HTML. Which is a sample of declarative programing.

Difference with W3C

Scriptlet is inline, hence runs every time where it is located in DOM. Scriplet could be written as in old-fashion way as in "modern" module type syntax. The type="module" allows to use modern JS features like import/export but if used outside of embed-page will run only once.

Scriptlets sources

number-format.js

change-bind.js