soak-up (🧽)

Absorb temporary light children into the upgraded Web Components, for those who insist that web components should be 100% progressive enhancement compatible.

In this example, scratch-box is a fancy looking checkbox-like web component.

``html

enh-be-importing=scratch-box/root.mjs>


Create demo






Write article





Exercise

`

What this does:

1. Does nothing until scratch-box is defined as a custom element.
2. Allows the user to make changes to the value of the build-in input / type=checkbox while waiting for the scratch-box elements to upgrade.
3. Once the upgrade has happened, absorbs the latest values of checked and name into the scratch-box element, and deletes the input element. Absorbs the textContent and itemprop values of the label element, then deletes the label element.

Using the emoji name.

This package contains an alternative name you can use for this enhancement (at the risk of conflicting with other libraries).

`html

enh-be-importing=scratch-box/root.mjs>


Create demo






Write article





Exercise

``