Basic <embed-page> demo

EPA-WG (Embeddable Progressive Applications Working Group)

The <embed-page/> is a web component acting as

Seamless IFRAME.
Its content is embedded into page DOM, but insulated on JS, DOM, CSS and browsing context level( A links and FORM get/post ).
Unlike IFRAME it is embedded inline into parent page DOM and automatically resizing parent node.
HTML include.
With plain html and JS/css injection into page content.
page-purple.html as <embed-page> in IFRAME Source
page-violet.html as <embed-page>

 

in IFRAME Source

Demo(this) page

Default style header

The content of this section, page-violet.html, and page-purple.html is identical.
Scripts and CSS rules are operating with same IDs and class names.

Visual demo

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 should not be affected by embed-page content.
    2. Operating the page content here should not affect the component` 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


page.js When used from embed-page, the document is wrapped to reflect component instance scope.
The click will trigger just own instance checkbox.