<embed-page> demo: plain HTML as Component

The <embed-page/> gives ability to use primitive HTML with global variables and event handlers as web page Component. It insulates global variables and functions and let then be used in onXXX event handlers.

Globals.
In micro-frontend hosted by <embed-page> there is no need to worry about scoping of variables. Globals could be defined by element id attribute, by using var/let/const, or just by name:

While in complex page it is a bad habit to use globals, in microapplication served by embed-page or IFRAME it is safe and advised as reduces the code complexity, hence increase readability and reliability.
As long as UI follows the microapplication pattern: serve only own limited content.
Event handlers.
Could be written as html onXXX attributes. See html-as-component.html sample bellow
While in complex page it is a bad habit to mix JS and HTML, in microapplication served by embed-page or IFRAME it is safe and advised as reduces the code complexity, hence increase readability and reliability.
As long as UI follows the microapplication pattern: serve only own limited content.
Globals across pages
Additional perk of <embed-page> : globals as uninitialized variables keep values across page navigation.
Of course be careful when appending data without trimming: JS memory pool is limited.

Demo cases


in IFRAME Source
Demo(this) page

Visual demo

IFRAMEs are given as reference to desired behavior. Meaning same actions on IFRAME and embed-page
    should have identical outcome in own UI.

CSS
    1. The header above should be intact(default) in color and text size.
    2. Colors in demo components and IFRAMEs should match the page name: purple, violet .

JS
    1. Checkboxes on page(in this section) should not be affected by embed-page content
        and checked as labeled. Click on "Toggle" button from embed-page should trigger
        checkmark only for own checkbox and not affect similar checkboxes in this section
        or another embed-page.
    2. Similarly toggling checkboxes here should not affect the embed-page intestines.

Links
    1. Click on link will replace the component content with page from href attribute.

Form
    1. GET and POST will replace content according to FORM action attribute.

location & window.location & document.location
    1. page in component populates text box with value matching SRC attribute of component.
    2. clear the text box, click on GET. The full URL matching SRC attribute
       should be placed in text box
    3. change text box to page-purple.html, click on SET. The content of component
       should load the page
    4. repeat step 1-3 with 'href-get', 'href-set', 'location get', 'location set'
    5. add URL properties like hash, port#, query parameters, user, password.
       'other properties' should place matching key-value in text box.
    6. change URL in text box, press 'assign()' or 'replace(), matching content
       should be fetched.
    7. 'reload()' should re-fetch and re-render content. See it in network and UI.
    8. 'location-win-doc' should give true for identical 'location', 'window.location'
       , and 'document.location'
    9. 'this===window' should give true
Cookies
    1. set cookies a=b, set cookies c=d
    2. get cookie should have both key/values presented
    3. refresh page, get cookies should have both key/values presented